Merge pull request #1696 from SpareBank1/symbols-typings

Legg til typescript typings for symbols

packages/ffe-symbols-react/scripts/fetchSymbolNames.js

@@ -0,0 +1,18 @@
+/*  Fetches all the icon names by using the codepoints in the font */
+const fetchSymbolNames = async () => {
+    let folderNames = [];
+    const url =
+        'https://raw.githubusercontent.com/google/material-design-icons/master/variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints';
+    const response = await fetch(url);
+    const data = await response.text();
+
+    const lines = data.split('\n');
+    const names = lines
+        .filter(line => line.trim() !== '')
+        .map(line => `'${line.split(' ')[0]}'`);
+    folderNames = [...folderNames, ...names];
+
+    return folderNames;
+};
+
+module.exports = fetchSymbolNames;

packages/ffe-symbols-react/scripts/generateSymbolTypings.js

@@ -0,0 +1,29 @@
+/*
+    This function is manually triggered, and will fetch all the names of the symbols.
+    The names are then gathered in an array that is used for typescript typings in the symbols component. 
+    
+    Important to only run this when we update the icon-font files, as we might sometimes be out of sync with whats
+    the latest in material icons.
+*/
+const path = require('path');
+const fs = require('fs').promises;
+const fetchSymbolNames = require('./fetchSymbolNames');
+
+const writeToFile = async (filePath, content) => {
+    try {
+        await fs.writeFile(filePath, content);
+        console.log('File written successfully');
+    } catch (error) {
+        console.error('Error writing file:', error);
+    }
+};
+
+const generateSymbolTypings = async () => {
+    const symbolNames = await fetchSymbolNames();
+    const fileContent = `export type SymbolName = ${symbolNames.join(' | ')}`;
+    const filePath = path.join(__dirname, '../src/typings/symbolNames.ts');
+
+    await writeToFile(filePath, fileContent);
+};
+
+generateSymbolTypings();

packages/ffe-symbols-react/src/index.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { SymbolName } from './typings/symbolNames.ts';
 
 export interface SymbolProps {
     fill?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     weight?: 300 | 400 | 500;
-    icon: string;
+    icon: SymbolName;
     className?: string;
     ariaLabel?: string;
 }