github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(storybook): make font load in Stories (#10081)

Browse Source 
### Changes 🏗️

#### Before

<img width="800" alt="Screenshot 2025-06-03 at 16 54 36"
src="https://github.com/user-attachments/assets/2a69b69d-2b01-436e-aab3-8206485a001c"
/>

#### After

<img width="800" alt="Screenshot 2025-06-03 at 16 58 38"
src="https://github.com/user-attachments/assets/4daf41d4-42ce-4119-8e9f-b2b10b524cba"
/>



### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [ ] checkout this branch ( _we should have PR previews for the app and
Storybook_ )
  - [ ] `cd autogpt_platform/frontend`
  - [ ] `yarn storybook`
- [ ] the stories road with the right font ( Poppins ) not a serif one 😄

#### For configuration changes:
- [ ] ~~`.env.example` is updated or already compatible with my
changes~~
- [ ] ~~`docker-compose.yml` is updated or already compatible with my
changes~~
- [ ] ~~I have included a list of my configuration changes in the PR
description (under **Changes**)~~
This commit is contained in:
Ubbe
2025-06-04 19:26:09 +04:00
committed by GitHub
parent eaf6da02d1
commit 722c6bcc18
5 changed files with 57 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
autogpt_platform/frontend/.storybook/main.ts
View File

@@ -18,4 +18,5 @@ const config: StorybookConfig = {
},
staticDirs: ["../public"],
};
export default config;

9
autogpt_platform/frontend/.storybook/preview.ts → autogpt_platform/frontend/.storybook/preview.tsx
View File

@@ -1,6 +1,8 @@
import React from "react";
import type { Preview } from "@storybook/react";
import { initialize, mswLoader } from "msw-storybook-addon";
import "../src/app/globals.css";
import "../src/components/styles/fonts.css";
// Initialize MSW
initialize();
@@ -18,6 +20,13 @@ const preview: Preview = {
},
},
loaders: [mswLoader],
decorators: [
(Story) => (
<>
<Story />
</>
),
],
};
export default preview;

12
autogpt_platform/frontend/src/app/layout.tsx
View File

@@ -1,8 +1,6 @@
import React, { Suspense } from "react";
import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { fonts } from "@/components/styles/fonts";
import "./globals.css";
@@ -11,12 +9,6 @@ import { Providers } from "@/app/providers";
import TallyPopupSimple from "@/components/TallyPopup";
import { GoogleAnalytics } from "@/components/analytics/google-analytics";
const poppins = Poppins({
subsets: ["latin"],
weight: ["400", "500", "600", "700"],
variable: "--font-poppins",
});
export const metadata: Metadata = {
title: "AutoGPT Platform",
description: "Your one stop shop to creating AI Agents",
@@ -30,7 +22,7 @@ export default async function RootLayout({
return (
<html
lang="en"
className={`${poppins.variable} ${GeistSans.variable} ${GeistMono.variable}`}
className={`${fonts.poppins.variable} ${fonts.sans.variable} ${fonts.mono.variable}`}
>
<head>
<GoogleAnalytics

30
autogpt_platform/frontend/src/components/styles/fonts.css Normal file
View File

@@ -0,0 +1,30 @@
/* Google Fonts - Poppins (weights: 400, 500, 600, 700) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
/* Local Geist Fonts from node_modules */
@font-face {
font-family: "Geist";
src: url("../../../node_modules/geist/dist/fonts/geist-sans/Geist-Variable.woff2")
format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GeistMono";
src: url("../../../node_modules/geist/dist/fonts/geist-mono/GeistMono-Variable.woff2")
format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* CSS Variables matching config from fonts.ts */
:root {
--font-poppins: "Poppins", sans-serif;
--font-geist-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-geist-mono:
"GeistMono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
Consolas, monospace;
}

15
autogpt_platform/frontend/src/components/styles/fonts.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Poppins } from "next/font/google";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
const poppins = Poppins({
subsets: ["latin"],
weight: ["400", "500", "600", "700"] as const,
variable: "--font-poppins",
});
export const fonts = {
poppins,
sans: GeistSans,
mono: GeistMono,
};