Skip to content

Commit 1949f92

Browse files
committed
created figma template files
1 parent 477a275 commit 1949f92

File tree

61 files changed

+4814
-3609
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+4814
-3609
lines changed

figma.config.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"parser": "react",
44
"label": "PF-React",
55
"importPaths": {
6-
"src/components/*": "@ui/components"
6+
"packages/react-core/src/*": "@patternfly/react-core"
77
},
88
"paths": {
99
"./next": ["packages/react-core/src/next"],
@@ -17,4 +17,4 @@
1717
"packages/react-core/src/components/assets/*"
1818
]
1919
}
20-
}
20+
}

packages/react-core/CONSTANTS.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Base URL for Figma designs
2+
export const FIGMA_ROOT_URL =
3+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=';
4+
5+
// Other application constants
6+
export const API_BASE_URL = 'https://api.example.com';
7+
export const DEFAULT_THEME = 'light';
8+
export const MAX_ITEMS_PER_PAGE = 50;
Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/* eslint-disable no-console */
2+
import fs from 'fs/promises';
3+
import { glob } from 'glob';
4+
import { FIGMA_ROOT_URL } from './CONSTANTS.js';
5+
6+
/**
7+
* Process a single file to fix Figma URLs with detailed debugging
8+
*/
9+
export async function processFigmaFile(filePath) {
10+
try {
11+
console.log(`\nProcessing file: ${filePath}`);
12+
const content = await fs.readFile(filePath, 'utf8');
13+
let modified = false;
14+
15+
// Find all figma.connect calls with string literals as second parameter
16+
// Updated regex to be more flexible with whitespace and formatting
17+
const figmaConnectRegex = /figma\.connect\(\s*[^,]+,\s*(['"])([^'"]+)\1/g;
18+
let match;
19+
let matchCount = 0;
20+
21+
// Test the content for any figma.connect calls
22+
const hasConnect = content.includes('figma.connect');
23+
console.log(`Contains figma.connect calls: ${hasConnect}`);
24+
25+
if (!hasConnect) {
26+
return false;
27+
}
28+
29+
// Process all matches
30+
while ((match = figmaConnectRegex.exec(content)) !== null) {
31+
matchCount++;
32+
const [fullMatch, quotes, url] = match;
33+
console.log(`\nMatch #${matchCount} found: ${fullMatch}`);
34+
console.log(`URL extracted: ${url}`);
35+
36+
// Only process if the URL doesn't already have the correct root
37+
const needsUpdate = !url.startsWith(FIGMA_ROOT_URL);
38+
console.log(`URL needs update: ${needsUpdate}`);
39+
40+
if (needsUpdate) {
41+
// Extract node ID from current URL
42+
let nodeId = null;
43+
44+
// Try to extract from node-id parameter
45+
const nodeIdMatch = url.match(/node-id=([^&]+)/);
46+
if (nodeIdMatch) {
47+
nodeId = nodeIdMatch[1];
48+
console.log(`Found node-id in URL parameter: ${nodeId}`);
49+
} else {
50+
// Try to extract from end of URL (format: digits-digits)
51+
const pathParts = url.split('/');
52+
const lastPart = pathParts[pathParts.length - 1];
53+
if (/^\d+-\d+$/.test(lastPart)) {
54+
nodeId = lastPart;
55+
console.log(`Found node-id at end of URL: ${nodeId}`);
56+
}
57+
}
58+
59+
// Only update if we successfully extracted a node ID
60+
if (nodeId) {
61+
const newUrl = `${FIGMA_ROOT_URL}${nodeId}`;
62+
console.log(`New URL will be: ${newUrl}`);
63+
64+
// Create new content by replacing the old URL with the new one
65+
const updatedContent = content.replace(fullMatch, fullMatch.replace(url, newUrl));
66+
67+
// Check if replacement actually changed anything
68+
if (updatedContent !== content) {
69+
console.log(`Successfully updated URL in content`);
70+
await fs.writeFile(filePath, updatedContent, 'utf8');
71+
console.log(`Updated file: ${filePath}`);
72+
modified = true;
73+
} else {
74+
console.log(`Warning: Replacement had no effect on content`);
75+
}
76+
} else {
77+
console.log(`Could not extract node ID from URL: ${url}`);
78+
}
79+
}
80+
}
81+
82+
console.log(`Total matches found: ${matchCount}`);
83+
return modified;
84+
} catch (error) {
85+
console.error(`Error processing ${filePath}:`, error);
86+
return false;
87+
}
88+
}
89+
90+
// Simple test function that processes one file
91+
export async function testProcessFile(filePath) {
92+
console.log('Running test on file:', filePath);
93+
const result = await processFigmaFile(filePath);
94+
console.log('Processing result:', result);
95+
}
96+
97+
// If this file is run directly, execute the fix
98+
if (import.meta.url === `file://${process.argv[1]}`) {
99+
const testFile = process.argv[2];
100+
101+
if (testFile) {
102+
// Test a specific file if provided
103+
testProcessFile(testFile);
104+
} else {
105+
// Otherwise, find and process all files
106+
console.log('Finding all .figma.tsx files...');
107+
glob('**/*.figma.tsx', {
108+
ignore: ['**/node_modules/**', '**/dist/**']
109+
}).then((files) => {
110+
console.log(`Found ${files.length} files to process`);
111+
if (files.length > 0) {
112+
testProcessFile(files[0]); // Test with the first file found
113+
}
114+
});
115+
}
116+
}
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/* eslint-disable no-console */
2+
import { glob } from 'glob';
3+
import chokidar from 'chokidar';
4+
import { processFigmaFile } from './figma-url-fixer.js';
5+
import { FIGMA_ROOT_URL } from './CONSTANTS.js';
6+
7+
// Figma file watcher function
8+
async function figmaFileWather() {
9+
console.log('Starting Figma URL watcher...');
10+
console.log('Current directory:', process.cwd());
11+
console.log('Using root URL:', FIGMA_ROOT_URL);
12+
13+
// Find all .figma.tsx files directly using glob
14+
const files = await glob('**/*.figma.tsx', {
15+
ignore: ['**/node_modules/**', '**/dist/**'],
16+
absolute: true // Get absolute paths
17+
});
18+
19+
console.log(`Found ${files.length} .figma.tsx files in the project:`);
20+
21+
if (files.length === 0) {
22+
console.log('No .figma.tsx files found. Please check your project structure.');
23+
return;
24+
}
25+
26+
// Log found files
27+
files.forEach((file) => console.log(` - ${file}`));
28+
29+
// Process all files first
30+
let fixedCount = 0;
31+
for (const file of files) {
32+
try {
33+
const wasFixed = await processFigmaFile(file);
34+
if (wasFixed) {
35+
fixedCount++;
36+
}
37+
} catch (error) {
38+
console.error(`Error processing ${file}:`, error.message);
39+
}
40+
}
41+
42+
console.log(`Initial processing complete. Fixed ${fixedCount} files.`);
43+
44+
// Now set up watcher for these specific files
45+
const watcher = chokidar.watch(files, {
46+
persistent: true,
47+
ignoreInitial: true, // We already processed them
48+
awaitWriteFinish: {
49+
stabilityThreshold: 300,
50+
pollInterval: 100
51+
}
52+
});
53+
54+
// Simple file handler
55+
const handleFile = async (filePath) => {
56+
console.log(`File changed: ${filePath}`);
57+
try {
58+
await processFigmaFile(filePath);
59+
} catch (error) {
60+
console.error(`Error processing ${filePath}:`, error.message);
61+
}
62+
};
63+
64+
// Set up event handlers
65+
watcher
66+
.on('change', handleFile)
67+
.on('ready', () => {
68+
console.log('Watcher ready. Monitoring these files for changes:');
69+
files.forEach((file) => console.log(` - ${file}`));
70+
})
71+
.on('error', (error) => console.error(`Watcher error:`, error));
72+
73+
console.log('Watcher started. Press Ctrl+C to stop.');
74+
}
75+
76+
// Run the figmaFileWather function
77+
figmaFileWather().catch((error) => {
78+
console.error('Fatal error:', error);
79+
});
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"codeConnect": {
3+
"parser": "react",
4+
"label": "PF-React",
5+
"importPaths": {
6+
"*": "src/components"
7+
},
8+
"paths": {
9+
"./next": ["@next"],
10+
"./deprecated": ["@deprecated"]
11+
},
12+
"include": [
13+
"src/components/**/*",
14+
"src/components/**/**/*"
15+
],
16+
"exclude": [
17+
"src/components/**/__tests__/*",
18+
"src/components/**/_tests_/*",
19+
"src/components/**/examples/*",
20+
"src/components/assets/*",
21+
"src/components/Icon/*"
22+
]
23+
}
24+
}
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// url=https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/uWhfFQ9xglKOhe9v1qRMgO/PatternFly-6%3A-Components?node-id=3-7&p=f&t=xVRfahiETV7MgoQi-0
2+
const figma = require('figma');
3+
const instance = figma.selectedInstance;
4+
5+
// Access component properties using the Template V2 API
6+
const labelText = instance.getString('Label'); // Gets the value of a text property
7+
const isDisabled = instance.getBoolean('Disabled'); // Gets the value of a boolean property
8+
9+
// Find and access child layers
10+
const iconInstance = instance.findInstance('Icon'); // Find a nested icon component
11+
const helperText = instance.findText('HelperText'); // Find a text layer
12+
13+
// Export the rendered code and optional metadata
14+
export default {
15+
example: figma.code`
16+
<MyComponent
17+
label={${labelText}}
18+
disabled={${isDisabled}}
19+
icon={${iconInstance.executeTemplate().example}}
20+
helperText={${helperText.textContent}}
21+
/>
22+
`,
23+
// Optional: Custom identifier for referencing this component
24+
id: 'my-component',
25+
metadata: {
26+
// Controls how this appears when nested in other components
27+
nestable: false
28+
}
29+
}

packages/react-core/package.json

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "6.2.0-prerelease.28",
44
"description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
55
"main": "dist/js/index.js",
6+
"type": "module",
67
"module": "dist/esm/index.js",
78
"types": "dist/esm/index.d.ts",
89
"typesVersions": {
@@ -43,23 +44,30 @@
4344
"build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
4445
"clean": "rimraf dist components layouts helpers next deprecated",
4546
"generate": "node scripts/copyStyles.mjs",
46-
"subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
47+
"subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json",
48+
"figma:watch": "node figma-url-watcher.js",
49+
"figma:fix": "node figma-fix-urls.js"
4750
},
4851
"dependencies": {
52+
"-": "^0.0.1",
4953
"@patternfly/react-icons": "workspace:^",
5054
"@patternfly/react-styles": "workspace:^",
5155
"@patternfly/react-tokens": "workspace:^",
56+
"@types/glob": "^8.1.0",
57+
"@types/node": "^22.13.5",
5258
"focus-trap": "7.6.4",
5359
"react-dropzone": "^14.3.5",
54-
"tslib": "^2.8.1"
60+
"ts-node": "^10.9.2",
61+
"tslib": "^2.8.1",
62+
"typescript": "^5.7.3"
5563
},
5664
"devDependencies": {
5765
"@patternfly/patternfly": "6.2.0-prerelease.15",
58-
"@figma/code-connect": "^1.3.0",
59-
"@patternfly/patternfly": "6.1.0",
6066
"case-anything": "^3.1.2",
67+
"@figma/code-connect": "^1.3.1",
6168
"css": "^3.0.0",
62-
"fs-extra": "^11.3.0"
69+
"fs-extra": "^11.3.0",
70+
"glob": "^11.0.1"
6371
},
6472
"peerDependencies": {
6573
"react": "^17 || ^18",

packages/react-core/src/README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
3+
## Icon generation
4+
5+
```node generateIconsFile.mjs --token=[your-personal-access-token]```
6+
7+
```npm install -g @figma/code-connect@latest```
8+
9+
10+
```npx figma connect create https://www.figma.com/design/uWhfFQ9xglKOhe9v1qRMgO/mnolting-cc-test\?node-id\=1259-678\&m\=dev --token=[your-personal-access-token]```
11+
12+
```npm install -g @figma/code-connect@latest```

packages/react-core/src/components/AboutModal/AboutModal.figma.tsx

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,13 @@ import React from 'react';
22
import { AboutModal } from './AboutModal';
33
import figma from '@figma/code-connect';
44

5-
/**
6-
* -- This file was auto-generated by Code Connect --
7-
* `props` includes a mapping from Figma properties and variants to
8-
* suggested values. You should update this to match the props of your
9-
* code component, and update the `example` function to return the
10-
* code example you'd like to see in Figma
11-
*/
12-
135
figma.connect(
146
AboutModal,
15-
'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=2879-13973&t=JTehBU2pTTE3vVQx-4',
7+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=2879-13973',
168
{
179
props: {
1810
productName: figma.string('Product name')
1911
},
20-
example: ({ productName }) => (
21-
<AboutModal
22-
isOpen={true}
23-
onClose={() => {}}
24-
brandImageAlt="image alt text"
25-
brandImageSrc="/assets/brand_image_src.jpg"
26-
backgroundImageSrc="/assets/background_image_src.jpg"
27-
productName={productName}
28-
trademark={'Sample footer trademark text'}
29-
>
30-
{'About modal children content here'}
31-
</AboutModal>
32-
)
12+
example: (props) => <AboutModal />
3313
}
3414
);

0 commit comments

Comments
 (0)