@fundamental-styles/mcp 0.41.6 → 0.41.7-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/CHANGELOG.md +7 -3
- package/data/component-guidance.json +2625 -0
- package/data/component-use-cases.json +51 -8
- package/package.json +1 -1
- package/src/data/load-catalog.d.ts +18 -1
- package/src/data/load-catalog.js +7 -1
- package/src/data/load-catalog.js.map +1 -1
- package/src/server.js +538 -8
- package/src/server.js.map +1 -1
- package/src/types/component-metadata.d.ts +17 -0
- package/src/types/component-metadata.js.map +1 -1
|
@@ -24,18 +24,33 @@
|
|
|
24
24
|
|
|
25
25
|
"useCases": {
|
|
26
26
|
"action-bar": {
|
|
27
|
+
"description": "The action bar displays at the top of the page, and includes the page's title, description, back button and action buttons. It provides page-level navigation and actions.",
|
|
27
28
|
"useCases": [
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
29
|
+
"Display the page title and description at the top of the page",
|
|
30
|
+
"Provide a back button for navigation to the previous page",
|
|
31
|
+
"Show page-level action buttons that affect all items or the entire view",
|
|
32
|
+
"Control settings of the UI that apply globally to the page",
|
|
33
|
+
"Display actions at the top of the screen that are always visible"
|
|
32
34
|
],
|
|
33
35
|
"avoidWhen": [
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
36
|
+
"Finalizing actions at the bottom of the screen (use bar with footer mode)",
|
|
37
|
+
"Item-specific actions (use toolbar for item-level controls)",
|
|
38
|
+
"Application-level navigation (use shellbar instead)"
|
|
37
39
|
],
|
|
38
|
-
"
|
|
40
|
+
"bestPractices": [
|
|
41
|
+
"Use the fd-title component with proper semantic heading levels (H1 styled as H3)",
|
|
42
|
+
"Include a back button on the left side for navigation hierarchy",
|
|
43
|
+
"Place page title and description prominently",
|
|
44
|
+
"Position primary actions on the right side",
|
|
45
|
+
"Use fd-button--emphasized for the primary page action",
|
|
46
|
+
"Keep action buttons concise and clearly labeled",
|
|
47
|
+
"Make the action bar sticky (fixed to top) for long scrolling pages",
|
|
48
|
+
"Limit the number of action buttons (3-5 maximum)",
|
|
49
|
+
"For accessibility, the page title must be an H1 (use fd-title with --h3 for visual styling)",
|
|
50
|
+
"Don't duplicate actions that appear elsewhere on the page"
|
|
51
|
+
],
|
|
52
|
+
"relatedComponents": ["bar", "toolbar", "shellbar", "title"],
|
|
53
|
+
"fioriGuidelinesUrl": "https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/action-bar"
|
|
39
54
|
},
|
|
40
55
|
|
|
41
56
|
"action-sheet": {
|
|
@@ -1058,6 +1073,34 @@
|
|
|
1058
1073
|
"relatedComponents": ["ai-writing-assistant", "textarea", "search-field"]
|
|
1059
1074
|
},
|
|
1060
1075
|
|
|
1076
|
+
"avatar": {
|
|
1077
|
+
"description": "Avatars are visual representations of users, products, or business entities, helping people quickly identify them within an application. Users can be shown with their own photos or initials, while products can be depicted with representative images or logos.",
|
|
1078
|
+
"useCases": [
|
|
1079
|
+
"Display user photos, initials, or placeholders for personal identification",
|
|
1080
|
+
"Show standardized images for business content such as products, parts, logos, or campaign visuals",
|
|
1081
|
+
"Represent concepts or entities with icons when images aren't available",
|
|
1082
|
+
"Present images with transparent backgrounds when needed for clarity or design fit",
|
|
1083
|
+
"Provide placeholder images when no other source image is available",
|
|
1084
|
+
"Apply avatars consistently in places like lists, cards, and headers to create familiarity and a uniform visual pattern across the interface"
|
|
1085
|
+
],
|
|
1086
|
+
"avoidWhen": [
|
|
1087
|
+
"Display pictures in a sequence, such as a slideshow or carousel (use carousel component)",
|
|
1088
|
+
"Display an interactive icon (use button with an icon inside)"
|
|
1089
|
+
],
|
|
1090
|
+
"bestPractices": [
|
|
1091
|
+
"Use a circle for people and a square for product or business-related images",
|
|
1092
|
+
"Use the predefined sizes",
|
|
1093
|
+
"For product icons, replace the default icon with a more suitable icon for your use case",
|
|
1094
|
+
"Provide a clear alternative text for the avatar image",
|
|
1095
|
+
"For interactive avatars and badges, provide both a tooltip and an alternative text",
|
|
1096
|
+
"Avoid unnecessarily large files",
|
|
1097
|
+
"Avoid badges on avatars smaller than size S",
|
|
1098
|
+
"Don't attach actions to icons in the avatar"
|
|
1099
|
+
],
|
|
1100
|
+
"relatedComponents": ["avatar-group", "button", "icon"],
|
|
1101
|
+
"fioriGuidelinesUrl": "https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/avatar"
|
|
1102
|
+
},
|
|
1103
|
+
|
|
1061
1104
|
"avatar-group": {
|
|
1062
1105
|
"useCases": [
|
|
1063
1106
|
"Multiple user avatars",
|
package/package.json
CHANGED
|
@@ -1,4 +1,19 @@
|
|
|
1
|
-
import { AccessibilityFile, ComponentMetadata, DesignToken, HtmlExamplesFile, ModifierRules, RelationshipsFile, UtilityClassesFile } from '../types/component-metadata';
|
|
1
|
+
import { AccessibilityFile, ComponentMetadata, ComponentUseCasesFile, DesignToken, HtmlExamplesFile, ModifierRules, RelationshipsFile, UtilityClassesFile } from '../types/component-metadata';
|
|
2
|
+
export interface ComponentGuidance {
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
category: string;
|
|
6
|
+
description: string;
|
|
7
|
+
whenToUse: string[];
|
|
8
|
+
whenToAvoid: string[];
|
|
9
|
+
bestPractices: string[];
|
|
10
|
+
relatedComponents?: string[];
|
|
11
|
+
}
|
|
12
|
+
export interface ComponentGuidanceFile {
|
|
13
|
+
version: string;
|
|
14
|
+
generated: string;
|
|
15
|
+
components: Record<string, ComponentGuidance>;
|
|
16
|
+
}
|
|
2
17
|
/** Resolve path to a data file — works both from source (development) and from dist (npm). */
|
|
3
18
|
export declare function resolveDataPath(fileName: string): string;
|
|
4
19
|
export interface LoadedCatalog {
|
|
@@ -10,6 +25,8 @@ export interface LoadedCatalog {
|
|
|
10
25
|
utilityClasses: UtilityClassesFile | null;
|
|
11
26
|
designTokens: DesignToken[];
|
|
12
27
|
htmlExamples: HtmlExamplesFile | null;
|
|
28
|
+
componentUseCases: ComponentUseCasesFile | null;
|
|
29
|
+
componentGuidance: ComponentGuidanceFile | null;
|
|
13
30
|
}
|
|
14
31
|
export declare function loadCatalog(): LoadedCatalog;
|
|
15
32
|
/** Read a text/markdown file from the data directory. Returns null if not found. */
|
package/src/data/load-catalog.js
CHANGED
|
@@ -78,6 +78,10 @@ function loadCatalog() {
|
|
|
78
78
|
}
|
|
79
79
|
// HTML examples
|
|
80
80
|
const htmlExamples = readJson(resolveDataPath('html-examples.json'));
|
|
81
|
+
// Component use cases
|
|
82
|
+
const componentUseCases = readJson(resolveDataPath('component-use-cases.json'));
|
|
83
|
+
// Component guidance (from skills folder)
|
|
84
|
+
const componentGuidance = readJson(resolveDataPath('component-guidance.json'));
|
|
81
85
|
return {
|
|
82
86
|
version: (_a = catalog === null || catalog === void 0 ? void 0 : catalog.version) !== null && _a !== void 0 ? _a : 'unknown',
|
|
83
87
|
components,
|
|
@@ -86,7 +90,9 @@ function loadCatalog() {
|
|
|
86
90
|
accessibility,
|
|
87
91
|
utilityClasses,
|
|
88
92
|
designTokens,
|
|
89
|
-
htmlExamples
|
|
93
|
+
htmlExamples,
|
|
94
|
+
componentUseCases,
|
|
95
|
+
componentGuidance
|
|
90
96
|
};
|
|
91
97
|
}
|
|
92
98
|
/** Read a text/markdown file from the data directory. Returns null if not found. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"load-catalog.js","sourceRoot":"","sources":["../../../../../packages/mcp/src/data/load-catalog.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"load-catalog.js","sourceRoot":"","sources":["../../../../../packages/mcp/src/data/load-catalog.ts"],"names":[],"mappings":"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"}
|