Skip to content

Commit 90f0908

Browse files
dainedaine
committed
chore: refactor
1 parent bc4f4c5 commit 90f0908

File tree

4 files changed

+109
-73
lines changed

4 files changed

+109
-73
lines changed

‎packages/web/scripts/generate-mermaid-diagram.js

Lines changed: 53 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@
33
const fs = require('fs');
44
const path = require('path');
55

6-
// Read the components.json file
7-
const componentsPath = path.join(__dirname, '../specs/components.json');
8-
const components = JSON.parse(fs.readFileSync(componentsPath, 'utf8'));
9-
10-
// Create a map of components for easy lookup
11-
const componentMap = new Map();
12-
components.components.forEach(component => {
13-
componentMap.set(component.tag, component);
14-
});
15-
6+
// Constants
7+
const MERMAID_CONFIG = {
8+
layout: 'elk',
9+
look: 'classic',
10+
theme: 'base'
11+
};
1612

13+
const OUTPUT_DIR = '../specs';
14+
const DIAGRAM_FILE = 'gcds-components-diagram.md';
15+
const PREVIEW_FILE = 'gcds-components-diagram-preview.md';
1716

1817
// Function to convert TypeScript type to a more readable format
1918
function formatType(type) {
@@ -28,69 +27,67 @@ function formatType(type) {
2827
}
2928

3029
// Function to generate class definitions for all components
31-
function generateClassDefinitions() {
32-
let output = '';
30+
function generateClassDefinitions(components) {
31+
const lines = [];
3332

3433
// Generate classes for all components in the order they appear
35-
components.components.forEach(component => {
34+
components.forEach(component => {
3635
const className = component.tag.replace(/-/g, '_');
3736

38-
output += ` class ${className} {\n`;
37+
lines.push(` class ${className} {`);
3938

4039
if (component.props && component.props.length > 0) {
4140
component.props.forEach(prop => {
4241
const propType = formatType(prop.type);
43-
output += `\t ${propType} ${prop.name}\n`;
42+
lines.push(`\t ${propType} ${prop.name}`);
4443
});
4544
}
4645

47-
output += ` }\n`;
46+
lines.push(' }');
4847
});
4948

50-
return output;
49+
return lines.join('\n');
5150
}
5251

5352
// Function to generate relationships based on actual dependencies
54-
function generateRelationships() {
55-
let output = '';
53+
function generateRelationships(components) {
54+
const lines = [];
5655

5756
// Generate relationships based on actual component dependencies
58-
components.components.forEach(component => {
57+
components.forEach(component => {
5958
if (component.dependencies && component.dependencies.length > 0) {
6059
const fromClass = component.tag.replace(/-/g, '_');
6160

6261
component.dependencies.forEach(dep => {
6362
const toClass = dep.replace(/-/g, '_');
64-
output += ` ${fromClass} --> ${toClass} : uses\n`;
63+
lines.push(` ${fromClass} --> ${toClass} : uses`);
6564
});
6665
}
6766
});
6867

69-
return output;
68+
return lines.join('\n');
7069
}
7170

7271
// Generate the complete MermaidJS diagram
73-
function generateMermaidDiagram() {
72+
function generateMermaidDiagram(components) {
7473
const header = `---
7574
config:
76-
layout: elk
77-
look: classic
78-
theme: base
75+
layout: ${MERMAID_CONFIG.layout}
76+
look: ${MERMAID_CONFIG.look}
77+
theme: ${MERMAID_CONFIG.theme}
7978
---
8079
classDiagram
8180
direction BT
8281
`;
8382

84-
const classDefinitions = generateClassDefinitions();
85-
const relationships = generateRelationships();
83+
const classDefinitions = generateClassDefinitions(components);
84+
const relationships = generateRelationships(components);
8685

87-
return header + classDefinitions + '\n' + relationships;
86+
return `${header}${classDefinitions}\n${relationships}`;
8887
}
8988

9089
// Generate GitHub-friendly markdown with Mermaid diagram
91-
function generateGitHubMarkdown() {
92-
const diagram = generateMermaidDiagram();
93-
90+
function generateGitHubMarkdown(diagram) {
9491
return `# GCDS Components Diagram
9592
9693
This diagram shows the component structure and relationships for the GCDS (Government of Canada Design System) components.
@@ -116,16 +113,27 @@ The diagram includes all GCDS components with their properties and dependencies
116113
`;
117114
}
118115

119-
// Generate and output the diagram
120-
const diagram = generateMermaidDiagram();
121-
const githubMarkdown = generateGitHubMarkdown();
122-
123-
// Save the original MermaidJS diagram
124-
const outputPath = path.join(__dirname, '../specs/gcds-components-diagram.md');
125-
fs.writeFileSync(outputPath, diagram);
126-
console.log(`\Diagram saved to: ${outputPath}`);
127-
128-
// Save the GitHub-friendly preview markdown
129-
const previewPath = path.join(__dirname, '../specs/gcds-components-diagram-preview.md');
130-
fs.writeFileSync(previewPath, githubMarkdown);
131-
console.log(`\nGitHub preview saved to: ${previewPath}`);
116+
// Main execution
117+
try {
118+
// Read the components.json file
119+
const componentsPath = path.join(__dirname, OUTPUT_DIR, 'components.json');
120+
const components = JSON.parse(fs.readFileSync(componentsPath, 'utf8'));
121+
122+
// Generate and output the diagram
123+
const diagram = generateMermaidDiagram(components.components);
124+
const githubMarkdown = generateGitHubMarkdown(diagram);
125+
126+
// Save the original MermaidJS diagram
127+
const outputPath = path.join(__dirname, OUTPUT_DIR, DIAGRAM_FILE);
128+
fs.writeFileSync(outputPath, diagram);
129+
console.log(`\nDiagram saved to: ${outputPath}`);
130+
131+
// Save the GitHub-friendly preview markdown
132+
const previewPath = path.join(__dirname, OUTPUT_DIR, PREVIEW_FILE);
133+
fs.writeFileSync(previewPath, githubMarkdown);
134+
console.log(`\nGitHub preview saved to: ${previewPath}`);
135+
136+
} catch (error) {
137+
console.error('❌ Error generating diagram:', error.message);
138+
process.exit(1);
139+
}

‎packages/web/scripts/postbuild.js

Lines changed: 55 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,68 @@ fs.copyFileSync('./dist/gcds/gcds.css', '../react/gcds.css');
77
fs.copyFileSync('./dist/gcds/gcds.css', '../vue/gcds.css');
88
fs.copyFileSync('./dist/gcds/gcds.css', '../react-ssr/gcds.css');
99

10-
// Sanitize paths in components.json to remove personal directory information
11-
try {
12-
const componentsPath = path.join(__dirname, '../specs/components.json');
13-
if (fs.existsSync(componentsPath)) {
14-
const components = JSON.parse(fs.readFileSync(componentsPath, 'utf8'));
15-
const workspaceRoot = path.resolve(__dirname, '../..');
10+
// ============================================================================
11+
// COMPONENTS.JSON PATH SANITIZATION
12+
// ============================================================================
13+
// Removes personal directory paths from components.json for portability
14+
15+
const COMPONENTS_FILE = '../specs/components.json';
16+
const WORKSPACE_ROOT = path.resolve(__dirname, '../..');
17+
18+
// Paths that need sanitization
19+
const PATH_FIELDS = ['filePath', 'dirPath', 'readmePath', 'usagesDir'];
20+
21+
// Sanitize a single path by removing workspace root
22+
function sanitizePath(filePath) {
23+
return filePath?.replace(WORKSPACE_ROOT, '') || filePath;
24+
}
25+
26+
// Sanitize all component paths
27+
function sanitizeComponentPaths(components) {
28+
components.forEach(component => {
29+
// Sanitize top-level paths
30+
PATH_FIELDS.forEach(field => {
31+
component[field] = sanitizePath(component[field]);
32+
});
1633

17-
components.components.forEach(component => {
18-
// Handle top-level paths
19-
if (component.filePath) component.filePath = component.filePath.replace(workspaceRoot, '');
20-
if (component.dirPath) component.dirPath = component.dirPath.replace(workspaceRoot, '');
21-
if (component.readmePath) component.readmePath = component.readmePath.replace(workspaceRoot, '');
22-
if (component.usagesDir) component.usagesDir = component.usagesDir.replace(workspaceRoot, '');
23-
24-
// Handle nested paths in complexType.references
25-
if (component.props) {
26-
component.props.forEach(prop => {
27-
if (prop.complexType && prop.complexType.references) {
28-
Object.values(prop.complexType.references).forEach(ref => {
29-
if (ref.path) {
30-
ref.path = ref.path.replace(workspaceRoot, '');
31-
}
32-
});
33-
}
34+
// Sanitize nested paths in complexType.references
35+
component.props?.forEach(prop => {
36+
prop.complexType?.references &&
37+
Object.values(prop.complexType.references).forEach(ref => {
38+
ref.path = sanitizePath(ref.path);
3439
});
35-
}
3640
});
41+
});
42+
}
43+
44+
// Main sanitization function
45+
function sanitizeComponentsFile() {
46+
const componentsPath = path.join(__dirname, COMPONENTS_FILE);
47+
48+
if (!fs.existsSync(componentsPath)) {
49+
console.log('⚠️ components.json not found, skipping sanitization');
50+
return;
51+
}
52+
53+
try {
54+
const components = JSON.parse(fs.readFileSync(componentsPath, 'utf8'));
55+
56+
if (!components.components?.length) {
57+
throw new Error('Invalid components.json structure');
58+
}
3759

60+
sanitizeComponentPaths(components.components);
3861
fs.writeFileSync(componentsPath, JSON.stringify(components, null, 2));
62+
3963
console.log('✅ Paths sanitized in components.json');
64+
} catch (error) {
65+
throw new Error(`Sanitization failed: ${error.message}`);
4066
}
67+
}
68+
69+
// Sanitize paths in components.json to remove personal directory information
70+
try {
71+
sanitizeComponentsFile();
4172
} catch (error) {
4273
console.error('❌ Error sanitizing paths:', error.message);
4374
}

‎packages/web/specs/gcds-components-diagram-preview.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,6 @@ direction BT
336336
string container
337337
boolean isFixed
338338
}
339-
340339
gcds_alert --> gcds_container : uses
341340
gcds_alert --> gcds_icon : uses
342341
gcds_breadcrumbs --> gcds_breadcrumbs_item : uses
@@ -405,7 +404,6 @@ direction BT
405404
gcds_topic_menu --> gcds_sr_only : uses
406405
gcds_topic_menu --> gcds_icon : uses
407406
gcds_verify_banner --> gcds_grid : uses
408-
409407
```
410408

411409
## How to Use

‎packages/web/specs/gcds-components-diagram.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,6 @@ direction BT
328328
string container
329329
boolean isFixed
330330
}
331-
332331
gcds_alert --> gcds_container : uses
333332
gcds_alert --> gcds_icon : uses
334333
gcds_breadcrumbs --> gcds_breadcrumbs_item : uses
@@ -396,4 +395,4 @@ direction BT
396395
gcds_top_nav --> gcds_nav_group : uses
397396
gcds_topic_menu --> gcds_sr_only : uses
398397
gcds_topic_menu --> gcds_icon : uses
399-
gcds_verify_banner --> gcds_grid : uses
398+
gcds_verify_banner --> gcds_grid : uses

0 commit comments

Comments
 (0)