feat(fuselage): Integrate Inter font

Author: tassoevan

.changeset/sweet-mirrors-live.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': minor
+---
+
+feat(fuselage): Integrate Inter font

packages/fuselage/.storybook/main.ts

@@ -1,8 +1,22 @@
-import { dirname, join } from 'path';
+import { dirname, join, resolve } from 'path';
 
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
-export default {
+const config: StorybookConfig = {
+  webpackFinal: async (config) => {
+    config.module?.rules?.push({
+      test: /\.woff2$/,
+      type: 'asset/resource',
+    });
+
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '~inter-ui': resolve(__dirname, '../../../node_modules/inter-ui'),
+    };
+
+    return config;
+  },
   addons: [
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@rocket.chat/storybook-dark-mode'),
@@ -87,7 +101,9 @@ export default {
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
-} satisfies StorybookConfig;
+};
+
+export default config;
 
 function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));

packages/fuselage/package.json

@@ -42,6 +42,7 @@
     "@rocket.chat/fuselage-tokens": "workspace:~",
     "@rocket.chat/memo": "workspace:~",
     "@rocket.chat/styled": "workspace:~",
+    "inter-ui": "~4.1.1",
     "invariant": "^2.2.4",
     "react-aria": "~3.37.0",
     "react-keyed-flatten-children": "^1.3.0",

packages/fuselage/src/fonts/inter.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('~inter-ui/variable/InterVariable.woff2') format('woff2');
+}

packages/fuselage/src/index.scss

@@ -1,3 +1,4 @@
+@import './fonts/inter.scss';
 @import './styles/functions.scss';
 @import './styles/variables/all.scss';
 @import './styles/mixins/all.scss';

packages/fuselage/webpack.config.js

@@ -41,6 +41,13 @@ export default (env, { mode = 'production' }) =>
             },
           },
         },
+        {
+          test: /\.woff2$/,
+          type: 'asset/resource',
+          generator: {
+            filename: 'fonts/[name][ext]',
+          },
+        },
         {
           test: /\.scss$/,
           use: [
@@ -72,11 +79,17 @@ export default (env, { mode = 'production' }) =>
     },
     resolve: {
       extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
+      alias: {
+        '~inter-ui': resolve(
+          import.meta.dirname,
+          '../../node_modules/inter-ui',
+        ),
+      },
     },
     externals: [
-      ...Object.keys(pkg.dependencies ?? {}).map(
-        (dep) => new RegExp(`^${dep}(/.+)?$`),
-      ),
+      ...Object.keys(pkg.dependencies ?? {})
+        .filter((dep) => dep !== 'inter-ui')
+        .map((dep) => new RegExp(`^${dep}(/.+)?$`)),
       ...Object.keys(pkg.peerDependencies ?? {}).map(
         (dep) => new RegExp(`^${dep}(/.+)?$`),
       ),

yarn.lock

@@ -5636,6 +5636,7 @@ __metadata:
     css-loader: "npm:~7.1.2"
     cssnano: "npm:~7.1.2"
     eslint: "npm:~9.39.2"
+    inter-ui: "npm:~4.1.1"
     invariant: "npm:^2.2.4"
     jest: "npm:~30.2.0"
     jest-axe: "npm:~10.0.0"
@@ -12236,6 +12237,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inter-ui@npm:~4.1.1":
+  version: 4.1.1
+  resolution: "inter-ui@npm:4.1.1"
+  checksum: 10/4c5438a85ea037c6c9e89a80ea7f5d7f31293c91110934a4faffd28da53577cc92480845a7959eb3501f243b58774f5f32b2a7aee597b49b5fc5455880186061
+  languageName: node
+  linkType: hard
+
 "internal-slot@npm:^1.1.0":
   version: 1.1.0
   resolution: "internal-slot@npm:1.1.0"