generate icons list in md file

src/icons/types/rubrics.ts → src/icons/types/icons.ts

@@ -1,126 +1,126 @@
 /** Don't edit manually. Generated by script: ./tools/icons/generate-types.ts */
 type IconName =
-  | 'post_office'
-  | 'information'
-  | 'industrial_enterprise'
-  | 'science'
-  | 'police'
-  | 'police_post'
-  | 'college'
-  | 'library'
-  | 'fire_station'
-  | 'government'
-  | 'protestant_church'
-  | 'orthodox_church'
-  | 'mosque'
-  | 'synagogue'
+  | 'airport'
+  | 'attraction'
+  | 'auto'
+  | 'aviary'
+  | 'baby_shop'
+  | 'banks'
+  | 'barbeque'
+  | 'bars'
+  | 'beach'
+  | 'bench'
+  | 'bike'
+  | 'bike_rent'
+  | 'boat_station'
+  | 'bookstore'
   | 'buddhism'
-  | 'cemetery'
-  | 'kindergarten'
-  | 'office'
+  | 'building'
+  | 'bus'
+  | 'cafe'
+  | 'car_park'
   | 'catholic_church'
-  | 'drugstores'
-  | 'hospital'
-  | 'medicine'
-  | 'dental'
+  | 'cemetery'
+  | 'childrens_playground'
   | 'cinemas'
-  | 'film_studio'
+  | 'clothes_shop'
+  | 'college'
   | 'concert_hall'
-  | 'attraction'
-  | 'ticket_office'
-  | 'driving_school'
-  | 'racing'
-  | 'banks'
+  | 'confectionary'
   | 'currency_exchange'
-  | 'software'
-  | 'travel_agency'
-  | 'haulier'
-  | 'tailor'
-  | 'hairdressers'
+  | 'dental'
+  | 'driving_school'
+  | 'drugstores'
   | 'dry_cleaning'
-  | 'laundry'
-  | 'printing_services'
-  | 'bike_rent'
-  | 'mobile_phones'
-  | 'photo'
-  | 'hotels'
-  | 'gasstation'
-  | 'tire_fitting'
+  | 'equestrian'
+  | 'fast_food'
+  | 'film_studio'
+  | 'fire_station'
   | 'fitness'
-  | 'sportcenter'
-  | 'sport_school'
-  | 'boat_station'
-  | 'office_service'
-  | 'spa'
-  | 'metro_bus'
-  | 'metro_light'
-  | 'railway'
-  | 'railway_station'
-  | 'port'
-  | 'airport'
-  | 'metro_cable'
-  | 'metro_funicular'
-  | 'metro_tram'
-  | 'metro'
-  | 'pier'
-  | 'bus'
-  | 'tram'
-  | 'metro_entrance'
-  | 'metro_monorail'
-  | 'taxi'
-  | 'hypermarket'
-  | 'petshop'
-  | 'bookstore'
-  | 'clothes_shop'
-  | 'furniture_store'
   | 'flower_shop'
-  | 'baby_shop'
-  | 'auto'
-  | 'malls'
-  | 'sport'
-  | 'supermarket'
-  | 'skating_rink'
-  | 'swimming_pool'
-  | 'waterfall'
-  | 'spring'
+  | 'forest'
   | 'fountain'
-  | 'theatre'
+  | 'furniture_store'
+  | 'garden'
+  | 'gasstation'
+  | 'government'
+  | 'hairdressers'
+  | 'haulier'
+  | 'helicopter'
+  | 'hospital'
+  | 'hotels'
+  | 'hypermarket'
+  | 'industrial_enterprise'
+  | 'information'
+  | 'kindergarten'
   | 'landmark'
+  | 'laundry'
+  | 'library'
+  | 'malls'
+  | 'medicine'
   | 'memorable_event'
+  | 'metro'
+  | 'metro_bus'
+  | 'metro_cable'
+  | 'metro_entrance'
+  | 'metro_funicular'
+  | 'metro_light'
+  | 'metro_monorail'
+  | 'metro_tram'
+  | 'mobile_phones'
+  | 'money_coin'
+  | 'monument'
+  | 'mosque'
+  | 'mountain'
   | 'museum'
-  | 'beach'
-  | 'zoo'
-  | 'garden'
+  | 'office'
+  | 'office_service'
+  | 'orthodox_church'
   | 'park'
-  | 'forest'
+  | 'pavilion'
+  | 'pet_playground'
+  | 'petshop'
+  | 'photo'
+  | 'picnic'
+  | 'pier'
+  | 'playground'
+  | 'police'
+  | 'police_post'
+  | 'port'
+  | 'post_office'
+  | 'printing_services'
+  | 'protestant_church'
+  | 'racing'
+  | 'railway'
+  | 'railway_station'
+  | 'recycling'
+  | 'restaurants'
   | 'rezervation'
-  | 'equestrian'
-  | 'stadium'
   | 'sanatorium'
-  | 'mountain'
-  | 'restaurants'
-  | 'cafe'
-  | 'fast_food'
+  | 'science'
+  | 'skating_rink'
+  | 'software'
+  | 'spa'
+  | 'sport'
+  | 'sport_school'
+  | 'sportcenter'
+  | 'spring'
+  | 'stadium'
+  | 'supermarket'
   | 'sushi'
-  | 'bars'
-  | 'confectionary'
-  | 'wc'
+  | 'swimming_pool'
+  | 'synagogue'
+  | 'tailor'
+  | 'taxi'
+  | 'theatre'
+  | 'ticket_office'
+  | 'tire_fitting'
+  | 'tram'
   | 'trash'
-  | 'helicopter'
-  | 'building'
-  | 'bench'
-  | 'aviary'
-  | 'money_coin'
-  | 'recycling'
-  | 'barbeque'
-  | 'pavilion'
-  | 'picnic'
-  | 'monument'
-  | 'childrens_playground'
-  | 'pet_playground'
-  | 'playground'
+  | 'travel_agency'
   | 'viewpoint'
-  | 'bike'
-  | 'car_park';
+  | 'waterfall'
+  | 'wc'
+  | 'zoo';
 
 export {IconName};

tools/icons/generate-docs.ts

@@ -0,0 +1,35 @@
+import {existsSync} from 'fs';
+import fs from 'fs/promises';
+import path from 'path';
+import {prettierFormat} from '../utils/prettier-format';
+import {BASE_DIR, ICONS_PATH} from './local';
+
+const DOCS_FILE_PATH = path.join(BASE_DIR, 'docs/icons.md');
+const TITLE = '# List of supported icons';
+const TABLE_HEADER = `
+| Name  | Normal Size | Small Size |
+| --- | --- | --- |
+`;
+
+export const generateIconsDocsList = async (iconNames: string[]) => {
+    let content = `${TITLE}\n\n${TABLE_HEADER}`;
+    content += iconNames
+        .map((name) => {
+            const normalFileName = `${name}_24.svg`;
+            const smallFileName = `${name}_14.svg`;
+
+            const normalAbsolutePath = path.join(ICONS_PATH, normalFileName);
+            const smallAbsolutePath = path.join(ICONS_PATH, smallFileName);
+
+            const normalRelativePath = `../../static/icons/${normalFileName}`;
+            const smallRelativePath = `../../static/icons/${smallFileName}`;
+
+            const normalIcon = existsSync(normalAbsolutePath) ? `![${name}](${normalRelativePath})` : `none`;
+            const smallIcon = existsSync(smallAbsolutePath) ? `![${name}](${smallRelativePath})` : `none`;
+
+            return `| ${name} | ${normalIcon} | ${smallIcon} |`;
+        })
+        .join('\n');
+    const formattedContent = await prettierFormat(content, 'markdown');
+    await fs.writeFile(DOCS_FILE_PATH, formattedContent);
+};

tools/icons/generate-types.ts

@@ -1,24 +1,18 @@
 import fs from 'fs/promises';
-import {uniq} from 'lodash';
 import path from 'path';
-import prettier from 'prettier';
-import {IconDescription, SIZE_REGEXP} from './fetch-icons';
+import {prettierFormat} from '../utils/prettier-format';
 import {BASE_DIR} from './local';
 
 const TYPES_PATH = path.join(BASE_DIR, 'src/icons/types');
 
-export const generateIconsTypes = async (icons: IconDescription[]) => {
+export const generateIconsTypes = async (iconNames: string[]) => {
     const type = 'IconName';
-    const iconNames = uniq(icons.map(({name}) => name.replace(SIZE_REGEXP, '')));
     const content = `
 /** Don't edit manually. Generated by script: ./tools/icons/generate-types.ts */
 type ${type} =${iconNames.map((name) => `| '${name}'`).join('\n')};
 
 export {${type}};
 `;
-
-    const prettierConfig = await prettier.resolveConfig(process.cwd());
-    const formattedContent = await prettier.format(content, {...prettierConfig, parser: 'typescript'});
-
+    const formattedContent = await prettierFormat(content, 'typescript');
     await fs.writeFile(path.join(TYPES_PATH, 'rubrics.ts'), formattedContent);
 };

tools/icons/get-uniq-names.ts

@@ -0,0 +1,6 @@
+import {uniq} from 'lodash';
+import {IconDescription, SIZE_REGEXP} from './fetch-icons';
+
+export const getUniqNames = (icons: IconDescription[]) => {
+    return uniq(icons.map(({name}) => name.replace(SIZE_REGEXP, ''))).sort();
+};

tools/icons/local.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import {IconDescriptionWithData} from './get-image-files';
 
 export const BASE_DIR = path.join(__dirname, '../../');
-const ICONS_PATH = path.join(BASE_DIR, 'static/icons');
+export const ICONS_PATH = path.join(BASE_DIR, 'static/icons');
 
 export type LocalIconDescription = {
     name: string;

tools/scripts/sync-icons.ts

@@ -1,10 +1,14 @@
+import {generateIconsDocsList} from '../icons/generate-docs';
 import {generateIconsTypes} from '../icons/generate-types';
+import {getUniqNames} from '../icons/get-uniq-names';
 import {updateIcons} from '../icons/update-icons';
 
 async function main() {
     try {
-        const icons = await updateIcons();
-        await generateIconsTypes(icons);
+        const iconsDescription = await updateIcons();
+        const iconNames = getUniqNames(iconsDescription);
+        await generateIconsTypes(iconNames);
+        await generateIconsDocsList(iconNames);
     } catch (error) {
         console.error(error.message || error.toString());
     }

tools/utils/prettier-format.ts

@@ -0,0 +1,6 @@
+import prettier from 'prettier';
+
+export const prettierFormat = async (rawContent: string, parser: prettier.Options['parser']): Promise<string> => {
+    const prettierConfig = await prettier.resolveConfig(process.cwd());
+    return prettier.format(rawContent, {...prettierConfig, parser});
+};