Merge pull request #16 from RyanClementsHax/custom-fonts

fix: handle only image file extensions with the next image loader
RyanClementsHax · Feb 4, 2022 · 104b02b · 104b02b
2 parents c468096 + 9dd5700
commit 104b02b
Show file tree

Hide file tree

Showing 125 changed files with 1,608 additions and 3,527 deletions.
diff --git a/examples/nextv10/.eslintrc.json b/examples/nextv10/.eslintrc.json
diff --git a/examples/nextv10/components/Header.js b/examples/nextv10/components/Header.js
@@ -0,0 +1,8 @@
+import { Links } from './Links'
+
+export const Header = () => (
+  <header>
+    <h1>Storybook Addon Next 💓 Next.js v10</h1>
+    <Links />
+  </header>
+)
diff --git a/examples/nextv10/components/Links.js b/examples/nextv10/components/Links.js
@@ -26,6 +26,9 @@ export const Links = () => (
     <li>
       <Link href="/absoluteImports">Absolute Import Example</Link>
     </li>
+    <li>
+      <Link href="/customFonts">Custom Font Example</Link>
+    </li>
     <li>
       <Link href="/typescript">Typescript Example</Link>
     </li>

diff --git a/examples/nextv10/package.json b/examples/nextv10/package.json
@@ -7,7 +7,8 @@
     "start": "next start",
     "lint": "next lint",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "build-storybook -s public",
+    "serve-storybook": "serve storybook-static"
   },
   "dependencies": {
     "next": "^10.0.0",
@@ -24,9 +25,7 @@
     "@storybook/manager-webpack5": "^6.4.9",
     "@storybook/react": "^6.4.9",
     "babel-loader": "^8.2.3",
-    "eslint": "8.6.0",
-    "eslint-config-next": "12.0.7",
-    "eslint-plugin-storybook": "^0.5.5",
+    "serve": "^13.0.2",
     "storybook-addon-next": "link:../../"
   }
 }
diff --git a/examples/nextv10/pages/absoluteImports.js b/examples/nextv10/pages/absoluteImports.js
@@ -1,4 +1,4 @@
-import { Links } from 'components/Links'
+import { Header } from 'components/Header'
 import { MyComponent } from 'components/MyComponent'
 import Head from 'next/head'
 
@@ -9,9 +9,9 @@ export default function AbsoluteImports() {
         <title>Absolute Imports</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Links />
+      <Header />
       <main>
-        This uses an absolute import:{' '}
+        <p>This uses an absolute import:</p>
         <MyComponent>Im absolutely imported</MyComponent>
       </main>
     </div>

diff --git a/examples/nextv10/pages/cssModules.js b/examples/nextv10/pages/cssModules.js
@@ -1,4 +1,4 @@
-import { Links } from 'components/Links'
+import { Header } from 'components/Header'
 import Head from 'next/head'
 import styles from '../styles/CssModules.module.css'
 
@@ -9,9 +9,9 @@ export default function CssModules() {
         <title>CSS Modules</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Links />
+      <Header />
       <main className={styles.main}>
-        <span>This is styled using CSS Modules</span>
+        <p>This is styled using CSS Modules</p>
       </main>
     </div>
   )

diff --git a/examples/nextv10/pages/customFonts.js b/examples/nextv10/pages/customFonts.js
@@ -0,0 +1,18 @@
+import { Header } from 'components/Header'
+import Head from 'next/head'
+
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <title>Custom Fonts</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header />
+      <main>
+        <p>This uses a custom font 👇</p>
+        <p className="icons"> </p>
+      </main>
+    </div>
+  )
+}
diff --git a/examples/nextv10/pages/globalStyleImports.js b/examples/nextv10/pages/globalStyleImports.js
@@ -1,4 +1,4 @@
-import { Links } from 'components/Links'
+import { Header } from 'components/Header'
 import Head from 'next/head'
 
 export default function CssModules() {
@@ -8,11 +8,13 @@ export default function CssModules() {
         <title>Global style imports</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Links />
+      <Header />
       <main>
-        The background of this page is set by "styles/globals.scss" and this
-        text size is set by "styles/globals.css". All global style imports need
-        to be done in ".storybook/preview.js" for storybook.
+        <p>
+          The background of this page is set by "styles/globals.scss" and this
+          text size is set by "styles/globals.css". All global style imports
+          need to be done in ".storybook/preview.js" for storybook.
+        </p>
       </main>
     </div>
   )

diff --git a/examples/nextv10/pages/index.js b/examples/nextv10/pages/index.js
@@ -1,4 +1,4 @@
-import { Links } from 'components/Links'
+import { Header } from 'components/Header'
 import Head from 'next/head'
 
 export default function Home() {
@@ -9,11 +9,16 @@ export default function Home() {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
+      <Header />
       <main>
-        <h1>
-          Click on any one of these links to see supported features in action
-        </h1>
-        <Links />
+        <p>
+          If in storybook, click on any one of the stories on the left to see
+          supported features
+        </p>
+        <p>
+          If running the nextjs dev server, click on any one of the above links
+          to see supported features
+        </p>
       </main>
     </div>
   )

diff --git a/examples/nextv10/pages/nextjsImages.js b/examples/nextv10/pages/nextjsImages.js
@@ -1,4 +1,4 @@
-import { Links } from 'components/Links'
+import { Header } from 'components/Header'
 import Image from 'next/image'
 import Head from 'next/head'
 
@@ -9,9 +9,9 @@ export default function NextjsImages() {
         <title>Nextjs Images</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Links />
+      <Header />
       <main>
-        <h2>This image uses a remote image</h2>
+        <p>This image uses a remote image</p>
         <Image src="/vercel.svg" alt="Vercel Logo" width={200} height={200} />
       </main>
     </div>

diff --git a/examples/nextv10/pages/nextjsRouting.js b/examples/nextv10/pages/nextjsRouting.js
@@ -1,4 +1,4 @@
-import { Links } from 'components/Links'
+import { Header } from 'components/Header'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 
@@ -11,7 +11,7 @@ export default function NextjsRouting() {
         <title>Nextjs Routing</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Links />
+      <Header />
       <main>
         <p>
           Interact with any of the links and look at the "Actions" tab below (if

diff --git a/examples/nextv10/pages/scssModules.js b/examples/nextv10/pages/scssModules.js
@@ -1,4 +1,4 @@
-import { Links } from 'components/Links'
+import { Header } from 'components/Header'
 import Head from 'next/head'
 import styles from '../styles/ScssModules.module.scss'
 
@@ -9,9 +9,9 @@ export default function ScssModules() {
         <title>SCSS Modules</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Links />
+      <Header />
       <main className={styles.main}>
-        <span>This is styled using SCSS Modules</span>
+        <p>This is styled using SCSS Modules</p>
       </main>
     </div>
   )

diff --git a/examples/nextv10/pages/styledJsx.js b/examples/nextv10/pages/styledJsx.js
@@ -1,4 +1,4 @@
-import { Links } from 'components/Links'
+import { Header } from 'components/Header'
 import Head from 'next/head'
 
 export default function StyledJsx() {
@@ -8,23 +8,14 @@ export default function StyledJsx() {
         <title>Styled JSX</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Links />
+      <Header />
       <style jsx>{`
-        .main {
-          padding: 4rem 0;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
-        .main span {
+        .main p {
           color: blue;
         }
       `}</style>
       <main className="main">
-        <span>This is styled using Styled JSX</span>
+        <p>This is styled using Styled JSX</p>
       </main>
     </div>
   )

diff --git a/examples/nextv10/pages/typescript.tsx b/examples/nextv10/pages/typescript.tsx
@@ -1,15 +1,17 @@
-import { Links } from 'components/Links'
+import { Header } from 'components/Header'
 import Head from 'next/head'
 
-export default function Typescript() {
+export default function Typescript(): JSX.Element {
   return (
     <div>
       <Head>
         <title>Typescript</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Links />
-      <main>This is a page using typescript</main>
+      <Header />
+      <main>
+        <p>This is a page using typescript</p>
+      </main>
     </div>
   )
 }
diff --git a/examples/nextv10/public/font/iconfont.eot b/examples/nextv10/public/font/iconfont.eot
diff --git a/examples/nextv10/public/font/iconfont.svg b/examples/nextv10/public/font/iconfont.svg
diff --git a/examples/nextv10/public/font/iconfont.ttf b/examples/nextv10/public/font/iconfont.ttf
diff --git a/examples/nextv10/public/font/iconfont.woff b/examples/nextv10/public/font/iconfont.woff
diff --git a/examples/nextv10/public/font/iconfont.woff2 b/examples/nextv10/public/font/iconfont.woff2
diff --git a/examples/nextv10/public/nyan-cat.png b/examples/nextv10/public/nyan-cat.png
diff --git a/examples/nextv10/stories/pages/customFonts.stories.jsx b/examples/nextv10/stories/pages/customFonts.stories.jsx
@@ -0,0 +1,8 @@
+import CustomFonts from '../../pages/customFonts'
+
+export default {
+  title: 'Pages',
+  component: CustomFonts
+}
+
+export const CustomFontsPage = () => <CustomFonts />
diff --git a/examples/nextv10/styles/CssModules.module.css b/examples/nextv10/styles/CssModules.module.css
@@ -1,12 +1,3 @@
-.main {
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.main span {
+.main p {
   color: red;
 }
diff --git a/examples/nextv10/styles/ScssModules.module.scss b/examples/nextv10/styles/ScssModules.module.scss
@@ -1,12 +1,5 @@
 .main {
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  span {
+  p {
     color: steelblue;
   }
 }
diff --git a/examples/nextv10/styles/globals.css b/examples/nextv10/styles/globals.css
@@ -1,3 +1,20 @@
 main {
   font-size: 1.25rem;
 }
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('../public/font/iconfont.eot?72359833');
+  src: url('../public/font/iconfont.eot?72359833#iefix')
+      format('embedded-opentype'),
+    url('../public/font/iconfont.woff2?72359833') format('woff2'),
+    url('../public/font/iconfont.woff?72359833') format('woff'),
+    url('../public/font/iconfont.ttf?72359833') format('truetype'),
+    url('../public/font/iconfont.svg?72359833#iconfont') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icons {
+  font-family: 'iconfont';
+}