|
1 | 1 | import dedent from 'dedent'; |
2 | 2 | import prettier from 'prettier'; |
3 | | -import type { VariableGroup, VariableInfo } from './parser'; |
| 3 | +import type { ComponentInfo } from './parser'; |
4 | 4 | import * as packagejson from '../package.json'; |
5 | 5 |
|
6 | | -type Column = { |
7 | | - name: string; |
8 | | - key: keyof VariableInfo | 'usedIn'; |
9 | | - type: 'code' | 'text' | 'values'; |
10 | | -}; |
11 | | -type Group = { name: string; regexp: RegExp; columns: Column[]; definedIn?: Function }; |
12 | | - |
13 | | -const row = (v: VariableInfo, group: Group) => { |
14 | | - const usedIn = [...v.referencedIn].map(componentThemeLink).join(', '); |
15 | | - const info = { ...v, usedIn }; |
16 | | - return dedent`${group.columns.map((c) => `| ${getColumn(c, info)}`).join('')}|`; |
17 | | -}; |
18 | | - |
19 | | -const getColumn = (column: Column, info: VariableInfo & { usedIn?: string }) => { |
20 | | - if (column.type === 'values') { |
21 | | - return getValuesColumn(info); |
22 | | - } else { |
23 | | - return getTextOrCodeColumn(column, info); |
24 | | - } |
25 | | -}; |
26 | | - |
27 | | -const getValuesColumn = (info: VariableInfo & { usedIn?: string }) => { |
28 | | - return `<table>${info.values |
29 | | - .map((v) => `<tr><th>\`${v.scope}\`</th></tr><tr><td>\`${v.value}\`</td></tr>`) |
30 | | - .join('')}</table>`; |
31 | | -}; |
32 | | - |
33 | | -const getTextOrCodeColumn = (column: Column, info: VariableInfo & { usedIn?: string }) => { |
34 | | - return `${column.type === 'code' ? '`' : ''}${info[column.key] || ''}${ |
35 | | - column.type === 'code' ? '`' : '' |
36 | | - }`; |
37 | | -}; |
38 | | - |
39 | | -export const getGlobalVariablesOutput = ( |
40 | | - data: Map<string, VariableInfo>, |
41 | | - type: 'theme' | 'layout', |
42 | | -) => { |
43 | | - const nameColumn: Column = { name: 'Name', key: 'name', type: 'code' }; |
44 | | - const valueColumn: Column = { name: 'Value(s)', key: 'values', type: 'values' }; |
45 | | - const descriptionColumn: Column = { name: 'Description', key: 'description', type: 'text' }; |
46 | | - const usedInColumn: Column = { name: 'Used in', key: 'usedIn', type: 'text' }; |
47 | | - |
48 | | - const groups = [ |
49 | | - { |
50 | | - name: 'Colors', |
51 | | - regexp: /color/, |
52 | | - columns: [nameColumn, valueColumn, descriptionColumn, usedInColumn], |
53 | | - }, |
54 | | - { |
55 | | - name: 'Typography', |
56 | | - regexp: /(__font|-text)/, |
57 | | - columns: [nameColumn, valueColumn, descriptionColumn, usedInColumn], |
58 | | - }, |
59 | | - { name: 'Spacing', regexp: /spacing/, columns: [nameColumn, valueColumn, descriptionColumn] }, |
60 | | - { |
61 | | - name: 'Radius', |
62 | | - regexp: /__border-radius/, |
63 | | - columns: [nameColumn, valueColumn, descriptionColumn, usedInColumn], |
64 | | - }, |
65 | | - { name: 'Others', regexp: /.*/, columns: [nameColumn, valueColumn, descriptionColumn] }, |
66 | | - ]; |
67 | | - |
68 | | - const variablesByGroups: Map<Group, string[]> = new Map(); |
69 | | - |
70 | | - data.forEach((variable) => { |
71 | | - for (const group of groups) { |
72 | | - if (group.regexp.test(variable.name)) { |
73 | | - if (!variablesByGroups.get(group)) { |
74 | | - variablesByGroups.set(group, []); |
75 | | - } |
76 | | - variablesByGroups.get(group)!.push(row(variable, group)); |
77 | | - break; |
78 | | - } |
79 | | - } |
80 | | - }); |
81 | | - |
82 | | - let output = ''; |
83 | | - groups.forEach((group) => { |
84 | | - if (variablesByGroups.get(group)) { |
85 | | - const header = |
86 | | - group.columns.map((c) => `| ${c.name}`).join('') + |
87 | | - `| \n` + |
88 | | - group.columns.map(() => '|-').join('') + |
89 | | - `|`; |
90 | | - output += dedent` |
91 | | - ### ${group.name} |
92 | | - ${header} |
93 | | - ${variablesByGroups.get(group)!.join('\n')}\n\n`; |
94 | | - } |
95 | | - }); |
96 | | - |
97 | | - output += `All global ${type} variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v${packagejson.version}/src/v2/styles/_global-${type}-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v${packagejson.version}/src/v2/styles/_global-${type}-variables.scss)\n\n`; |
| 6 | +export const getGlobalVariablesOutput = (type: 'theme' | 'layout') => { |
| 7 | + const output = `([list of global ${type} variables](https://github.com/GetStream/stream-chat-css/tree/v${packagejson.version}/src/v2/styles/_global-${type}-variables.scss))`; |
98 | 8 |
|
99 | 9 | return format(output); |
100 | 10 | }; |
101 | 11 |
|
102 | | -export const getComponentVariablesOutput = (data: Map<string, VariableInfo>) => { |
103 | | - const nameColumn: Column = { name: 'Name', key: 'name', type: 'code' }; |
104 | | - const valueColumn: Column = { name: 'Value(s)', key: 'values', type: 'values' }; |
105 | | - const descriptionColumn: Column = { name: 'Description', key: 'description', type: 'text' }; |
106 | | - |
107 | | - const subgroupDefinitions = [ |
108 | | - { |
109 | | - name: 'Theme variables', |
110 | | - regexp: /color|border|box-shadow|overlay|background/, |
111 | | - columns: [nameColumn, valueColumn, descriptionColumn], |
112 | | - definedIn: componentThemeLink, |
113 | | - }, |
114 | | - { |
115 | | - name: 'Layout variables', |
116 | | - regexp: /.*/, |
117 | | - columns: [nameColumn, valueColumn, descriptionColumn], |
118 | | - definedIn: componentLayoutLink, |
119 | | - }, |
120 | | - ]; |
121 | | - |
122 | | - const componentsGroups: Map<VariableGroup, Map<Group, string[]>> = new Map(); |
123 | | - data.forEach((v) => { |
124 | | - const variableGroup = v.definedIn; |
125 | | - if (variableGroup) { |
126 | | - let existingVariableGroup = Array.from(componentsGroups.keys()).find( |
127 | | - (g) => g.componentName === variableGroup.componentName, |
128 | | - ); |
129 | | - if (!existingVariableGroup) { |
130 | | - componentsGroups.set(variableGroup, new Map()); |
131 | | - existingVariableGroup = variableGroup; |
132 | | - } |
133 | | - const componentGroup = componentsGroups.get(existingVariableGroup)!; |
134 | | - const subgroup = subgroupDefinitions.find((subgroup) => subgroup.regexp.test(v.name)); |
135 | | - if (subgroup) { |
136 | | - if (!componentGroup.get(subgroup)) { |
137 | | - componentGroup.set(subgroup, []); |
138 | | - } |
139 | | - componentGroup.get(subgroup)?.push(row(v, subgroup)); |
140 | | - } |
141 | | - } |
142 | | - }); |
143 | | - |
144 | | - let output = ''; |
145 | | - Array.from(componentsGroups.entries()) |
146 | | - .sort((e1, e2) => e1[0].componentName.localeCompare(e2[0].componentName)) |
147 | | - .forEach(([variableGroup, variablesBySubgroups]) => { |
148 | | - output += dedent` |
149 | | - ## ${variableGroup.componentName}${ |
150 | | - variableGroup.sdkRestriction |
151 | | - ? ` - Only available in ${variableGroup.sdkRestriction} SDK` |
152 | | - : '' |
153 | | - }\n`; |
154 | | - |
155 | | - subgroupDefinitions.forEach((group) => { |
156 | | - if (variablesBySubgroups.get(group)) { |
157 | | - const header = |
158 | | - group.columns.map((c) => `| ${c.name}`).join('') + |
159 | | - `| \n` + |
160 | | - group.columns.map(() => '|-').join('') + |
161 | | - `|`; |
162 | | - output += dedent` |
163 | | - ### ${group.name} |
164 | | - ${header} |
165 | | - ${variablesBySubgroups.get(group)!.join('\n')}\n |
166 | | - Defined in: ${group.definedIn(variableGroup.componentName)}\n\n`; |
167 | | - } |
168 | | - }); |
| 12 | +export const getComponentVariablesOutput = (componentInfos: ComponentInfo[]) => { |
| 13 | + const header = `Component name | Variables | \n |-|-| \n`; |
| 14 | + let output = header; |
| 15 | + componentInfos |
| 16 | + .sort((e1, e2) => e1.name.localeCompare(e2.name)) |
| 17 | + .forEach((componentInfo) => { |
| 18 | + output += dedent`\`${componentInfo.name}\`${ |
| 19 | + componentInfo.sdkRestriction ? ` (${componentInfo.sdkRestriction} SDK only)` : '' |
| 20 | + } | ${componentInfo.variableTypes |
| 21 | + .map((t) => |
| 22 | + t === 'theme' |
| 23 | + ? componentThemeLink(componentInfo.name) |
| 24 | + : componentLayoutLink(componentInfo.name), |
| 25 | + ) |
| 26 | + .join(', ')}|`; |
| 27 | + output += `\n`; |
169 | 28 | }); |
170 | 29 |
|
171 | 30 | return format(output); |
172 | 31 | }; |
173 | 32 |
|
174 | | -export const getPaletteVariablesOutput = (data: Map<string, VariableInfo>) => { |
175 | | - const row = (variableInfo: VariableInfo) => { |
176 | | - return `| \`${variableInfo.name}\` | ${getValuesColumn(variableInfo)} |`; |
177 | | - }; |
178 | | - const rows = Array.from(data.values()).map(row); |
179 | | - |
180 | | - let output = dedent` |
181 | | - | Name | Value(s) | |
182 | | - |------|-------| |
183 | | - ${rows.join('\n')}`; |
184 | | - |
185 | | - return format(output); |
186 | | -}; |
187 | | - |
188 | 33 | const componentThemeLink = (componentName: string) => { |
189 | 34 | const pathInRepo = `https://github.com/GetStream/stream-chat-css/tree/v${packagejson.version}/src/v2/styles/`; |
190 | | - return `[${componentName}](${pathInRepo}#COMP#/#COMP#-theme.scss)`.replaceAll( |
| 35 | + return `[theme variables](${pathInRepo}#COMP#/#COMP#-theme.scss)`.replaceAll( |
191 | 36 | '#COMP#', |
192 | 37 | componentName, |
193 | 38 | ); |
194 | 39 | }; |
195 | 40 |
|
196 | 41 | const componentLayoutLink = (componentName: string) => { |
197 | 42 | const pathInRepo = `https://github.com/GetStream/stream-chat-css/tree/v${packagejson.version}/src/v2/styles/`; |
198 | | - return `[${componentName}](${pathInRepo}#COMP#/#COMP#-layout.scss)`.replaceAll( |
| 43 | + return `[layout variables](${pathInRepo}#COMP#/#COMP#-layout.scss)`.replaceAll( |
199 | 44 | '#COMP#', |
200 | 45 | componentName, |
201 | 46 | ); |
|
0 commit comments