[Icon]: Ensure consuming apps receive Icon's IconName type instead of…

… a bad relative import path (#689)

Consuming apps should know @brave/leo but ../../../ is not the correct relative path from the typescript build output path

examples/example-ui-react/src/App.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
-import '../../../tokens/css/variables.css'
-import LeoButton from '../../../react/button'
-import Tooltip from '../../../react/tooltip'
+import '@brave/leo/tokens/css/variables.css'
+import LeoButton from '@brave/leo/react/button'
+import Tooltip from '@brave/leo/react/tooltip'
+import Input from '@brave/leo/react/input'
+import Dropdown from '@brave/leo/react/dropdown'
+import ButtonMenu from '@brave/leo/react/buttonMenu'
+import Toggle from '@brave/leo/react/toggle'
+import Icon from '@brave/leo/react/icon'
 import styles from './App.module.css'
-import Input from '../../../react/input'
-import Dropdown from '../../../react/dropdown'
-import ButtonMenu from '../../../react/buttonMenu'
-import Toggle from '../../../react/toggle'
-import Icon from '../../../react/icon'
 
 function App() {
   // Verify that we can change props and children (slots)

examples/example-ui-react/tsconfig.json

@@ -17,7 +17,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "experimentalDecorators": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@brave/leo/*": ["../../*"]
+    }
   },
   "include": ["src"]
 }

examples/example-ui-react/webpack.config.js

@@ -92,8 +92,9 @@ module.exports = function (argv) {
       alias: {
         svelte: path.resolve('node_modules', 'svelte'),
         react: path.resolve('node_modules', 'react'),
-        ['react-dom']: path.resolve('node_modules', 'react-dom'),
-        ['react-router']: path.resolve('node_modules', 'react-router')
+        'react-dom': path.resolve('node_modules', 'react-dom'),
+        'react-router': path.resolve('node_modules', 'react-router'),
+        '@brave/leo': path.resolve(__dirname, '../../')
       }
     }
   }

src/components/icon/icon.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <script lang="ts">
-  import type { IconName } from '../../../icons/meta'
+  import type { IconName } from '@brave/leo/icons/meta'
   export let name: IconName = undefined
   export let forceColor: boolean = false
   export let title: string = undefined

tsconfig.json

@@ -4,6 +4,11 @@
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
   "compilerOptions": {
     "strictNullChecks": false,
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "paths": {
+      // Sometimes we want to preserve @brave/leo for complex paths when providing
+      // typescript types for the consumer.
+      "@brave/leo/*": ["./*"]
+    }
   }
 }