From f86b57b56168feabe0673e09967974e6ae5a7755 Mon Sep 17 00:00:00 2001 From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com> Date: Fri, 18 Aug 2023 15:15:30 -0400 Subject: [PATCH 01/11] Update error message to be useful when google fonts fail to load Helpful for debugging which fonts need to be mocked related: https://github.com/storybookjs/storybook/issues/23332 --- .../font/webpack/loader/google/get-font-face-declarations.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts index 9526072fe0bf..3f45a5d085e4 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts @@ -33,7 +33,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions) { cssCache.delete(url); } if (fontFaceCSS === null) { - throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts.`); + throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts. URL: \`${url}\``); } return { @@ -45,6 +45,6 @@ export async function getFontFaceDeclarations(options: LoaderOptions) { variable, }; } catch (error) { - throw new Error("Google Fonts couldn't be loaded."); + throw new Error("Google Fonts couldn't be loaded.", {cause: error}); } } From 1f5b00b9b5c2b8e0a37cd2037f6d772539950b21 Mon Sep 17 00:00:00 2001 From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com> Date: Fri, 18 Aug 2023 15:29:57 -0400 Subject: [PATCH 02/11] basic docs (will add code references in a moment) --- .../build-pages-with-storybook.md | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md index 4307a31020f4..90e0508a8a9f 100644 --- a/docs/writing-stories/build-pages-with-storybook.md +++ b/docs/writing-stories/build-pages-with-storybook.md @@ -394,3 +394,24 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator /> + +### Mocking fonts + +If your application uses fonts from a Google, occasionally fetching these fonts may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. + +#### Mocking fonts in Next.js + +Next.js [supports](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36)https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36 mocking fonts via a javascript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references. + + + + + + From 9fb47bd45d06ba68d6fe840445581f3b48f23068 Mon Sep 17 00:00:00 2001 From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com> Date: Fri, 18 Aug 2023 15:42:00 -0400 Subject: [PATCH 03/11] Update docs --- docs/sharing/publish-storybook.md | 6 ++++ ...hromatic-github-action-with-mocking.js.mdx | 10 +++++++ .../common/mocked-google-fonts.js.mdx | 29 +++++++++++++++++++ .../build-pages-with-storybook.md | 6 ++-- 4 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 docs/snippets/common/chromatic-github-action-with-mocking.js.mdx create mode 100644 docs/snippets/common/mocked-google-fonts.js.mdx diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md index 0c89b6978653..ad011fc3b7ab 100644 --- a/docs/sharing/publish-storybook.md +++ b/docs/sharing/publish-storybook.md @@ -109,6 +109,12 @@ In your project's root directory, add a new file called `chromatic.yml` inside t +
+ +💡 External font resources may occasionally fail to load at build timefor a variety of reasons. If you have issues with them, a good way to get around that problem is to [mock the fonts](../writing-stories/build-pages-with-storybook.md#mocking-fonts) your application requires + +
+ Commit and push the file. Congratulations, you've successfully automated publishing your Storybook. Now whenever you open a PR you’ll get a handy link to your published Storybook in your PR checks. ![PR check publish](./prbadge-publish.png) diff --git a/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx b/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx new file mode 100644 index 000000000000..2b4ae573a5e5 --- /dev/null +++ b/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx @@ -0,0 +1,10 @@ +```shell + - uses: chromaui/action@v1 + env: + #👇 the location of mocked fonts to use + NEXT_FONT_GOOGLE_MOCKED_RESPONSES: ${{ github.workspace }}/mocked-google-fonts.js + with: + #👇 Chromatic projectToken, + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + token: ${{ secrets.GITHUB_TOKEN }} +``` diff --git a/docs/snippets/common/mocked-google-fonts.js.mdx b/docs/snippets/common/mocked-google-fonts.js.mdx new file mode 100644 index 000000000000..ccc04bd0efab --- /dev/null +++ b/docs/snippets/common/mocked-google-fonts.js.mdx @@ -0,0 +1,29 @@ +```js +// mocked-google-fonts.js + +//👇 Mocked responses of google fonts +// If you run into errors during your build, easiest is to fetch them yourself and drop them in here +// so the URL requested explicitly matches the mocks rather than trying to determine it yourself. +module.exports = { + "https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block": ` + /* cyrillic-ext */ + @font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; + } + /* more font declarations go here */ + /* latin */ + @font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + }`, +} +``` diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md index 90e0508a8a9f..6553d19cdf1d 100644 --- a/docs/writing-stories/build-pages-with-storybook.md +++ b/docs/writing-stories/build-pages-with-storybook.md @@ -407,10 +407,8 @@ Next.js [supports](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779 From 6405f3646ca2935ff9eb882a6d6e131cceed3452 Mon Sep 17 00:00:00 2001 From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com> Date: Fri, 18 Aug 2023 15:44:34 -0400 Subject: [PATCH 04/11] add missing space --- docs/sharing/publish-storybook.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md index ad011fc3b7ab..1e3b4145ff20 100644 --- a/docs/sharing/publish-storybook.md +++ b/docs/sharing/publish-storybook.md @@ -111,7 +111,7 @@ In your project's root directory, add a new file called `chromatic.yml` inside t
-💡 External font resources may occasionally fail to load at build timefor a variety of reasons. If you have issues with them, a good way to get around that problem is to [mock the fonts](../writing-stories/build-pages-with-storybook.md#mocking-fonts) your application requires +💡 External font resources may occasionally fail to load at build time for a variety of reasons. If you have issues with them, a good way to get around that problem is to [mock the fonts](../writing-stories/build-pages-with-storybook.md#mocking-fonts) your application requires
From 9d84f42bca9e03b435da00d9bde5f4e18447a3c7 Mon Sep 17 00:00:00 2001 From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com> Date: Fri, 18 Aug 2023 15:48:22 -0400 Subject: [PATCH 05/11] remove extra word --- docs/writing-stories/build-pages-with-storybook.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md index 6553d19cdf1d..53f1de9efb93 100644 --- a/docs/writing-stories/build-pages-with-storybook.md +++ b/docs/writing-stories/build-pages-with-storybook.md @@ -397,7 +397,7 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator ### Mocking fonts -If your application uses fonts from a Google, occasionally fetching these fonts may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. +If your application uses fonts from Google, occasionally fetching these fonts may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. #### Mocking fonts in Next.js From 13a729ca5501d4297e52dbf64c98eb7eef74964b Mon Sep 17 00:00:00 2001 From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com> Date: Mon, 21 Aug 2023 09:51:58 -0400 Subject: [PATCH 06/11] linting --- .../font/webpack/loader/google/get-font-face-declarations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts index 3f45a5d085e4..8da5b6acf833 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts @@ -45,6 +45,6 @@ export async function getFontFaceDeclarations(options: LoaderOptions) { variable, }; } catch (error) { - throw new Error("Google Fonts couldn't be loaded.", {cause: error}); + throw new Error("Google Fonts couldn't be loaded.", { cause: error }); } } From abf551fa1037b8d2eca81b2ea723964019a09588 Mon Sep 17 00:00:00 2001 From: Nathan Heaps Date: Mon, 21 Aug 2023 09:59:52 -0400 Subject: [PATCH 07/11] prettier linting --- docs/snippets/common/mocked-google-fonts.js.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/snippets/common/mocked-google-fonts.js.mdx b/docs/snippets/common/mocked-google-fonts.js.mdx index ccc04bd0efab..a56429147f1d 100644 --- a/docs/snippets/common/mocked-google-fonts.js.mdx +++ b/docs/snippets/common/mocked-google-fonts.js.mdx @@ -5,7 +5,7 @@ // If you run into errors during your build, easiest is to fetch them yourself and drop them in here // so the URL requested explicitly matches the mocks rather than trying to determine it yourself. module.exports = { - "https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block": ` + 'https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block': ` /* cyrillic-ext */ @font-face { font-family: 'Inter'; @@ -25,5 +25,5 @@ module.exports = { src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }`, -} +}; ``` From 07846ac1a946b0b28bd618e9bfdec5ce6255e12d Mon Sep 17 00:00:00 2001 From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com> Date: Wed, 30 Aug 2023 09:28:03 -0400 Subject: [PATCH 08/11] PR feedback - move docs into nextjs specific readme --- code/frameworks/nextjs/README.md | 46 +++++++++++++++++++ docs/sharing/publish-storybook.md | 6 --- ...hromatic-github-action-with-mocking.js.mdx | 10 ---- .../common/mocked-google-fonts.js.mdx | 29 ------------ .../build-pages-with-storybook.md | 19 -------- 5 files changed, 46 insertions(+), 64 deletions(-) delete mode 100644 docs/snippets/common/chromatic-github-action-with-mocking.js.mdx delete mode 100644 docs/snippets/common/mocked-google-fonts.js.mdx diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index 4d9ea8542470..d1e1a33bcc85 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -19,6 +19,7 @@ - [next/font/google](#nextfontgoogle) - [next/font/local](#nextfontlocal) - [Not supported features of next/font](#not-supported-features-of-nextfont) + - [Mocking fonts during testing](#mocking-fonts-during-testing) - [Next.js Routing](#nextjs-routing) - [Overriding defaults](#overriding-defaults) - [Global Defaults](#global-defaults) @@ -271,6 +272,51 @@ The following features are not supported (yet). Support for these features might - [preload](https://nextjs.org/docs/api-reference/next/font#preload) option gets ignored. Storybook handles Font loading its own way. - [display](https://nextjs.org/docs/api-reference/next/font#display) option gets ignored. All fonts are loaded with display set to "block" to make Storybook load the font properly. +#### Mocking fonts during testing + +Occasionally fetching fonts from google may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. Next.js [supports](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36)https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36 mocking fonts via a javascript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references. + +For example, using [GitHub Actions](https://www.chromatic.com/docs/github-actions): + +```shell + - uses: chromaui/action@v1 + env: + #👇 the location of mocked fonts to use + NEXT_FONT_GOOGLE_MOCKED_RESPONSES: ${{ github.workspace }}/mocked-google-fonts.js + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + token: ${{ secrets.GITHUB_TOKEN }} +``` + +Your mocked fonts will look something lke this: + +```js +// mocked-google-fonts.js +//👇 Mocked responses of google fonts with the URL as the key +module.exports = { + 'https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block': ` + /* cyrillic-ext */ + @font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; + } + /* more font declarations go here */ + /* latin */ + @font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + }`, +}; +``` + ### Next.js Routing [Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions ctions panel if you have the [Storybook actions addon](https://storybook.js.org/docs/react/essentials/actions). diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md index 1e3b4145ff20..0c89b6978653 100644 --- a/docs/sharing/publish-storybook.md +++ b/docs/sharing/publish-storybook.md @@ -109,12 +109,6 @@ In your project's root directory, add a new file called `chromatic.yml` inside t -
- -💡 External font resources may occasionally fail to load at build time for a variety of reasons. If you have issues with them, a good way to get around that problem is to [mock the fonts](../writing-stories/build-pages-with-storybook.md#mocking-fonts) your application requires - -
- Commit and push the file. Congratulations, you've successfully automated publishing your Storybook. Now whenever you open a PR you’ll get a handy link to your published Storybook in your PR checks. ![PR check publish](./prbadge-publish.png) diff --git a/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx b/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx deleted file mode 100644 index 2b4ae573a5e5..000000000000 --- a/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```shell - - uses: chromaui/action@v1 - env: - #👇 the location of mocked fonts to use - NEXT_FONT_GOOGLE_MOCKED_RESPONSES: ${{ github.workspace }}/mocked-google-fonts.js - with: - #👇 Chromatic projectToken, - projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - token: ${{ secrets.GITHUB_TOKEN }} -``` diff --git a/docs/snippets/common/mocked-google-fonts.js.mdx b/docs/snippets/common/mocked-google-fonts.js.mdx deleted file mode 100644 index a56429147f1d..000000000000 --- a/docs/snippets/common/mocked-google-fonts.js.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```js -// mocked-google-fonts.js - -//👇 Mocked responses of google fonts -// If you run into errors during your build, easiest is to fetch them yourself and drop them in here -// so the URL requested explicitly matches the mocks rather than trying to determine it yourself. -module.exports = { - 'https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block': ` - /* cyrillic-ext */ - @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: block; - src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; - } - /* more font declarations go here */ - /* latin */ - @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: block; - src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - }`, -}; -``` diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md index 53f1de9efb93..4307a31020f4 100644 --- a/docs/writing-stories/build-pages-with-storybook.md +++ b/docs/writing-stories/build-pages-with-storybook.md @@ -394,22 +394,3 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator /> - -### Mocking fonts - -If your application uses fonts from Google, occasionally fetching these fonts may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. - -#### Mocking fonts in Next.js - -Next.js [supports](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36)https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36 mocking fonts via a javascript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references. - - - - - - From 8dae1fe5872fd36e35bd42f402fc087fed88bdf0 Mon Sep 17 00:00:00 2001 From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com> Date: Mon, 4 Sep 2023 12:02:39 -0400 Subject: [PATCH 09/11] Apply suggestions from code review Co-authored-by: Yann Braga --- code/frameworks/nextjs/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index d1e1a33bcc85..21624ab23efa 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -274,7 +274,7 @@ The following features are not supported (yet). Support for these features might #### Mocking fonts during testing -Occasionally fetching fonts from google may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. Next.js [supports](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36)https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36 mocking fonts via a javascript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references. +Occasionally fetching fonts from Google may fail as part of your Storybook build step. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. Next.js [supports mocking fonts](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36) via a JavaScript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references. For example, using [GitHub Actions](https://www.chromatic.com/docs/github-actions): @@ -288,7 +288,7 @@ For example, using [GitHub Actions](https://www.chromatic.com/docs/github-action token: ${{ secrets.GITHUB_TOKEN }} ``` -Your mocked fonts will look something lke this: +Your mocked fonts will look something like this: ```js // mocked-google-fonts.js From 9a56048b48afdf4cdfc46d44d8d28768436562a6 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 8 Sep 2023 11:54:52 +0200 Subject: [PATCH 10/11] categorize nextjs font errors --- code/frameworks/nextjs/package.json | 1 + .../google/get-font-face-declarations.ts | 11 ++++- .../core-events/src/errors/server-errors.ts | 40 +++++++++++++++++++ code/yarn.lock | 1 + 4 files changed, 51 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 82220e09a260..69cb987570ee 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -95,6 +95,7 @@ "@storybook/addon-actions": "workspace:*", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", + "@storybook/core-events": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preset-react-webpack": "workspace:*", "@storybook/preview-api": "workspace:*", diff --git a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts index 8da5b6acf833..396de4fdd5ac 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts @@ -1,6 +1,10 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error import loaderUtils from 'next/dist/compiled/loader-utils3'; +import { + GoggleFontsDownloadError, + GoogleFontsLoadingError, +} from '@storybook/core-events/server-errors'; import type { LoaderOptions } from '../types'; const cssCache = new Map>(); @@ -33,7 +37,10 @@ export async function getFontFaceDeclarations(options: LoaderOptions) { cssCache.delete(url); } if (fontFaceCSS === null) { - throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts. URL: \`${url}\``); + throw new GoggleFontsDownloadError({ + fontFamily, + url, + }); } return { @@ -45,6 +52,6 @@ export async function getFontFaceDeclarations(options: LoaderOptions) { variable, }; } catch (error) { - throw new Error("Google Fonts couldn't be loaded.", { cause: error }); + throw new GoogleFontsLoadingError({ error, url }); } } diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index f773a2fbf69e..27b9250b8204 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -279,3 +279,43 @@ export class AngularLegacyBuildOptionsError extends StorybookError { `; } } + +export class GoggleFontsDownloadError extends StorybookError { + readonly category = Category.FRAMEWORK_NEXTJS; + + readonly code = 1; + + public readonly documentation = + 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#nextjs-font-optimization'; + + constructor(public data: { fontFamily: string; url: string }) { + super(); + } + + template() { + return dedent` + Failed to fetch \`${this.data.fontFamily}\` from Google Fonts with URL: \`${this.data.url}\` + `; + } +} + +export class GoogleFontsLoadingError extends StorybookError { + readonly category = Category.FRAMEWORK_NEXTJS; + + readonly code = 2; + + public readonly documentation = + 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#nextjs-font-optimization'; + + constructor(public data: { error: unknown | Error; url: string }) { + super(); + } + + template() { + return dedent` + An error occurred when trying to load Google Fonts with URL \`${this.data.url}\`. + + ${this.data.error instanceof Error ? this.data.error.message : ''} + `; + } +} diff --git a/code/yarn.lock b/code/yarn.lock index 1ab170d5bbc7..8a5046151342 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7299,6 +7299,7 @@ __metadata: "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" + "@storybook/core-events": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preset-react-webpack": "workspace:*" "@storybook/preview-api": "workspace:*" From 668a65a73fcd4f9483e77c0d9abec3b59f51e481 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 8 Sep 2023 16:34:05 +0200 Subject: [PATCH 11/11] fix typo --- .../font/webpack/loader/google/get-font-face-declarations.ts | 4 ++-- code/lib/core-events/src/errors/server-errors.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts index 396de4fdd5ac..0f8bfb1957f8 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts @@ -2,7 +2,7 @@ // @ts-expect-error import loaderUtils from 'next/dist/compiled/loader-utils3'; import { - GoggleFontsDownloadError, + GoogleFontsDownloadError, GoogleFontsLoadingError, } from '@storybook/core-events/server-errors'; import type { LoaderOptions } from '../types'; @@ -37,7 +37,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions) { cssCache.delete(url); } if (fontFaceCSS === null) { - throw new GoggleFontsDownloadError({ + throw new GoogleFontsDownloadError({ fontFamily, url, }); diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 27b9250b8204..d75f33ff7277 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -280,7 +280,7 @@ export class AngularLegacyBuildOptionsError extends StorybookError { } } -export class GoggleFontsDownloadError extends StorybookError { +export class GoogleFontsDownloadError extends StorybookError { readonly category = Category.FRAMEWORK_NEXTJS; readonly code = 1;