fix(ffe-symbols-react): wip legg til typings for symbol

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

@@ -0,0 +1,42 @@
+/*
+    This function is manually triggered, and will fetch all the names of the folders in the "symbols/web" folder 
+    in the official material design icons repository. 
+    The names are gathered in an array that is used for 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');
+
+const fetchAllSymbolNames = () => {
+    const reqUrl =
+        'https://api.github.com/repos/google/material-design-icons/contents/symbols/web';
+
+    return fetch(reqUrl)
+        .then(response => {
+            if (response.ok) return response.json();
+            else {
+                throw new Error(
+                    'Failed to fetch the content of the repository',
+                );
+            }
+        })
+        .then(data => {
+            const folderNames = data
+                .filter(item => item.type === 'dir')
+                .map(item => item.name);
+
+            let fileContent = `const symbolNames = ' + JSON.stringify(folderNames) + ' as const; 
+            export type SymbolName = (typeof symbolNames)[number];`;
+            fs.writeFileSync(
+                '../src/typings/symbolNames.ts',
+                'export type SymbolName = ' + JSON.stringify(folderNames),
+            );
+
+            return folderNames;
+        })
+        .catch(error => console.error(error));
+};
+
+fetchAllSymbolNames();

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;
 }