-
Notifications
You must be signed in to change notification settings - Fork 5
/
example.figma-extractor.config.js
116 lines (104 loc) · 3.13 KB
/
example.figma-extractor.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
// @ts-check
// eslint-disable-next-line @typescript-eslint/no-var-requires
/**
* @type {import('@shakuroinc/figma-extractor').Config}
**/
module.exports = {
apiKey: 'xxxxxx',
fileId: 'xxxxxx',
jsonVariablesPath: './variables.json',
styles: {
exportPath: './src/theme',
allowedThemes: ['light', 'dark'], // allowed themes
defaultTheme: 'light', // one of the allowed themes which will be meant as default theme
colors: {
collectionNames: ['color', 'color_extra'],
// keyName: nameFromFigma => nameFromFigma`, // custom key name
},
responsive: {
collectionNames: ['responsive', 'responsive_extra'],
// keyName: nameFromFigma => nameFromFigma`, // custom key name
},
effects: {
collectionNames: ['effects'],
// keyName: nameFromFigma => nameFromFigma`, // custom key name
},
textStyles: {
collectionNames: ['typography', 'typography_xl'],
keyName: nameFromFigma => {
return `.v-${getKeyName(nameFromFigma)}`;
},
},
},
icons: [
// black and white icons
// {
// nodeIds: ['522-12152'],
// iconName: name => name.replace(/ /g, '').replace('/', '-').toLowerCase(),
// exportPath: './atoms/icon',
// generateSprite: false,
// generateTypes: false,
// localIcons: false,
// },
// For color icons
/*{
nodeIds: [
// add even one node id
],
iconName: name => name.replace(/ /g, '').replace('/', '-').toLowerCase(),
exportPath: './atoms/icon',
optimizeSvg: false,
generateSprite: false,
generateTypes: false,
localIcons: false,
},*/
// It's block of the config is to generate sprite and types
{
nodeIds: ['522-12152'],
exportPath: './src/atoms/icon',
generateSprite: true,
generateTypes: true,
localIcons: true,
},
],
};
/** @param {string} name */
function getKeyName(name = '') {
if (name.toLowerCase().startsWith('ui-kit') || name.toLowerCase().startsWith('ui kit')) {
return 'INTERNAL_DO_NOT_USE';
}
/**
* format name from like:
* "heading/h800 - md" -> "h800-md"
* "heading / h800 - md" -> "h800-md"
*/
const resultName = name.split('/').join('-');
if (!resultName) {
throw `getKeyName for "${name}" returns an empty string, check getKeyName implementation`;
}
return resultName;
}
/** @param {string} name */
function getKeyNameWithTheme(name = '') {
if (name.toLowerCase().startsWith('ui-kit') || name.toLowerCase().startsWith('ui kit')) {
return 'INTERNAL_DO_NOT_USE';
}
const splittedName = name.split('/');
/**
* format name from like:
* "dark/heading/h800 - md" -> "h800-md"
* "dark / heading / h800 - md" -> "h800-md"
*/
let resultName = splittedName
.at(-1)
?.replace(' - ', '-')
.split(' ')
.find(name => name !== '');
resultName = `${splittedName[0]}/${resultName}`;
if (!resultName) {
throw `getKeyNameWithTheme for "${name}" returns an empty string, check getKeyName implementation`;
}
// eslint-disable-next-line no-console
console.log('getKeyNameWithTheme: ', { name, resultName });
return resultName;
}