From 6b46bda2a2b7c99778f66288b67d5dbf23137e77 Mon Sep 17 00:00:00 2001 From: artemis prime Date: Fri, 26 Jan 2024 11:36:05 -0800 Subject: [PATCH 1/2] 0.2.2: remove index from and cleaned up /next --- .gitignore | 12 +++++------ .nvmrc | 1 - pkgs/luxdefi-ui/next/README.md | 11 ++++++++++ .../next/determine-device-middleware.ts | 5 ++++- .../next/get-app-router-font-classes.ts | 18 ++++++----------- pkgs/luxdefi-ui/next/index.ts | 20 ------------------- ...ad-and-return-lux-next-fonts-on-import.ts} | 20 +++++++++++-------- .../next/pages-router-font-vars.tsx | 2 +- pkgs/luxdefi-ui/package.json | 2 +- 9 files changed, 40 insertions(+), 51 deletions(-) delete mode 100644 .nvmrc create mode 100644 pkgs/luxdefi-ui/next/README.md delete mode 100644 pkgs/luxdefi-ui/next/index.ts rename pkgs/luxdefi-ui/next/{lux-next-fonts.ts => load-and-return-lux-next-fonts-on-import.ts} (85%) diff --git a/.gitignore b/.gitignore index 48219718..609ad052 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ # dependencies node_modules +**/node_modules .pnp .pnp.js @@ -10,8 +11,6 @@ coverage # next.js .next/ -out/ -build # misc .DS_Store @@ -24,17 +23,16 @@ yarn-error.log* .pnpm-debug.log* # local env files -.env.local -.env.development.local -.env.test.local -.env.production.local +**/.env +**/.env.* # turbo .turbo .contentlayer -tsconfig.tsbuildinfo +**/tsconfig.tsbuildinfo +# build **/dist **/.npmrc \ No newline at end of file diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 3f430af8..00000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v18 diff --git a/pkgs/luxdefi-ui/next/README.md b/pkgs/luxdefi-ui/next/README.md new file mode 100644 index 00000000..d0e920ec --- /dev/null +++ b/pkgs/luxdefi-ui/next/README.md @@ -0,0 +1,11 @@ +# Next related Lux helpers + +### no `index.ts` file, and `load-and-return-lux-next-fonts-on-import.ts` + +Next font loading requires the fonts to be assigned to const's in module scope (ie, loaded when the module is evaluated, exactly once). + +If there was an `index.ts` "barrel file", and the client code imported anything from this package, it would have resulted in evaluting all the packages imported including the that loaded the fonts. Without the index, the client code knows what modules import it and thus when it happens. + +tl;dr: See [this article from Vercel](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) about this issue. + +(Previously, not having this safegaurd caused a serious bug becuase the fonts were loaded far too early.) \ No newline at end of file diff --git a/pkgs/luxdefi-ui/next/determine-device-middleware.ts b/pkgs/luxdefi-ui/next/determine-device-middleware.ts index fb451003..f7a04574 100644 --- a/pkgs/luxdefi-ui/next/determine-device-middleware.ts +++ b/pkgs/luxdefi-ui/next/determine-device-middleware.ts @@ -1,7 +1,8 @@ import { NextRequest, NextResponse, userAgent } from 'next/server' import { getSelectorsByUserAgent } from 'react-device-detect' -export const determineDeviceMiddleware = async (request: NextRequest) => { + // writed this way so they can be chained :) +const determineDeviceMiddleware = async (request: NextRequest) => { const ua = userAgent(request) const { isMobileOnly, isTablet, isDesktop } = getSelectorsByUserAgent(ua.ua) @@ -11,3 +12,5 @@ export const determineDeviceMiddleware = async (request: NextRequest) => { url.searchParams.set('agent', agent) return NextResponse.rewrite(url) } + +export default determineDeviceMiddleware diff --git a/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts b/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts index c47ddd84..88494b89 100644 --- a/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts +++ b/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts @@ -1,18 +1,12 @@ -import fontDescs from './lux-next-fonts' +import nextFonts from './load-and-return-lux-next-fonts-on-import' import type NextFontDesc from './next-font-desc' // These will be injected for in app router app that uses our RootLayout // First is assumed to be mapped to the default font and is injected into // as a normal tw font family class. -export default () => { - let nextFonts: NextFontDesc[] = [] - fontDescs.forEach((desc: NextFontDesc) => { - if (desc.nextFont) { - nextFonts.push(desc) - } - }) - return nextFonts.map( - (desc: NextFontDesc) => (desc.nextFont!.variable) - ).join(' ') + ` font-${nextFonts[0].twName}` -} +export default () => ( + nextFonts.map( + (desc: NextFontDesc) => (desc.nextFont!.variable) + ).join(' ') + ` font-${nextFonts[0].twName}` +) diff --git a/pkgs/luxdefi-ui/next/index.ts b/pkgs/luxdefi-ui/next/index.ts deleted file mode 100644 index ddf036f7..00000000 --- a/pkgs/luxdefi-ui/next/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { determineDeviceMiddleware } from './determine-device-middleware' -import NotFoundMDX from './not-found-content.mdx' -import NotFound from './not-found' -import RootLayout from './root-layout' -import luxNextFonts from './lux-next-fonts' -import type {default as NextFontDesc, NextFontWithVariable,} from './next-font-desc' -import getAppRouterBodyFontClasses from './get-app-router-font-classes' -import PagesRouterFontVars from './pages-router-font-vars' - -export { - determineDeviceMiddleware, - NotFoundMDX, - NotFound, - RootLayout, - getAppRouterBodyFontClasses, - PagesRouterFontVars, - luxNextFonts, - type NextFontDesc, - type NextFontWithVariable, -} diff --git a/pkgs/luxdefi-ui/next/lux-next-fonts.ts b/pkgs/luxdefi-ui/next/load-and-return-lux-next-fonts-on-import.ts similarity index 85% rename from pkgs/luxdefi-ui/next/lux-next-fonts.ts rename to pkgs/luxdefi-ui/next/load-and-return-lux-next-fonts-on-import.ts index e9df80e9..b761bc09 100644 --- a/pkgs/luxdefi-ui/next/lux-next-fonts.ts +++ b/pkgs/luxdefi-ui/next/load-and-return-lux-next-fonts-on-import.ts @@ -6,6 +6,15 @@ import type TwFontDesc from '../tailwind/tw-font-desc' import twFonts from '../tailwind/lux-tw-fonts' +/* + Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed + at different times during the next compile / build. Otherwise a nasty + race condition happens! + + Also, requires that "Font loaders must be called and assigned to a const in the module scope" + +*/ + const drukTextWide = localFont({ src: [ { @@ -32,14 +41,7 @@ const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }) - - -/* - NextFontDesc and TwFontDesc have to be seperate because they are needed - at different times during the next compile / build. Otherwise a nasty - race condition happens! That's why they are in different files. -*/ - + export default [ { font: inter, @@ -62,3 +64,5 @@ export default [ }) } ) as NextFontDesc[] + + diff --git a/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx b/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx index 5068ca09..3af66999 100644 --- a/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx +++ b/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx @@ -1,5 +1,5 @@ -import nextFonts from './lux-next-fonts' +import nextFonts from './load-and-return-lux-next-fonts-on-import' import type NextFontDesc from './next-font-desc' const PagesRouterFontVars: React.FC = () => { diff --git a/pkgs/luxdefi-ui/package.json b/pkgs/luxdefi-ui/package.json index a02a2d58..6aa72b72 100644 --- a/pkgs/luxdefi-ui/package.json +++ b/pkgs/luxdefi-ui/package.json @@ -1,6 +1,6 @@ { "name": "@luxdefi/ui", - "version": "0.2.1", + "version": "0.2.2", "description": "Library that contains shared UI primitives, styles, and core types", "publishConfig": { "registry": "https://registry.npmjs.org/", From 28f4191598c5f989b137f30bf507b58afe0bdbf8 Mon Sep 17 00:00:00 2001 From: artemis prime Date: Fri, 26 Jan 2024 21:17:32 -0800 Subject: [PATCH 2/2] removed BannerBlock (specific to market site) --- .../blocks/components/banner-block.tsx | 103 ------------------ pkgs/luxdefi-ui/blocks/components/index.ts | 2 - pkgs/luxdefi-ui/blocks/def/banner-block.ts | 18 --- pkgs/luxdefi-ui/blocks/def/index.ts | 2 - pkgs/luxdefi-ui/index.ts | 1 - pkgs/luxdefi-ui/package.json | 2 +- pkgs/luxdefi-ui/primitives/video-player.tsx | 4 - 7 files changed, 1 insertion(+), 131 deletions(-) delete mode 100644 pkgs/luxdefi-ui/blocks/components/banner-block.tsx delete mode 100644 pkgs/luxdefi-ui/blocks/def/banner-block.ts diff --git a/pkgs/luxdefi-ui/blocks/components/banner-block.tsx b/pkgs/luxdefi-ui/blocks/components/banner-block.tsx deleted file mode 100644 index 869eca7a..00000000 --- a/pkgs/luxdefi-ui/blocks/components/banner-block.tsx +++ /dev/null @@ -1,103 +0,0 @@ - -import React from 'react' - -import type { Dimensions, TShirtSize } from '../../types' -import type { Block, BannerBlock } from '../def' - -import VideoBlockComponent from './video-block' -import CTABlockComponent from './cta-block' - -type BannerGrouping = 'all-separate' | 'title-media-cta' | 'titleAndMedia-cta' - -const BannerBlockComponent: React.FC<{ - block: Block, - videoSize?: TShirtSize - videoConstraint?: Dimensions - grouping?: BannerGrouping - groupingClasses?: string[] // count should match number of siblings in the chosen grouping - ctaItemClassName?: string -}> = ({ - block, - grouping = 'titleAndMedia-cta', - groupingClasses=[], - ctaItemClassName='', - videoSize='md', - videoConstraint -}) => { - - if (block.blockType !== 'banner') { - return <>banner block required - } - const banner = block as BannerBlock - - if (grouping === 'title-media-cta') { - const titleClasses = (groupingClasses && groupingClasses[0]) ? groupingClasses[0] : '' - const mediaClasses = (groupingClasses && groupingClasses[1]) ? groupingClasses[1] : '' - const ctaClasses = (groupingClasses && groupingClasses[2]) ? groupingClasses[2] : '' - return (<> -
-

{banner.title}

- {banner.byline && (
{banner.byline}
)} -
-
- {banner.contentBefore && banner.contentBefore} - {banner.video && ( - - )} - {banner.contentAfter && banner.contentAfter } -
- {banner.cta && ( -
- -
- )} - ) - } - else if (grouping === 'titleAndMedia-cta') { - const titleAndMediaClasses = (groupingClasses && groupingClasses[0]) ? groupingClasses[0] : '' - const ctaClasses = (groupingClasses && groupingClasses[1]) ? groupingClasses[1] : '' - return (<> -
-

{banner.title}

- {banner.byline && (
{banner.byline}
)} - {banner.contentBefore && banner.contentBefore} - {banner.video && ( - - )} - {banner.contentAfter && banner.contentAfter } -
- {banner.cta && ( -
- -
- )} - ) - } - - const titleClasses = (groupingClasses && groupingClasses[0]) ? groupingClasses[0] : '' - const bylineClasses = (groupingClasses && groupingClasses[1]) ? groupingClasses[1] : '' - const contentBeforeClasses = (groupingClasses && groupingClasses[2]) ? groupingClasses[2] : '' - const mediaClasses = (groupingClasses && groupingClasses[3]) ? groupingClasses[3] : '' - const contentAfterClasses = (groupingClasses && groupingClasses[4]) ? groupingClasses[4] : '' - const ctaClasses = (groupingClasses && groupingClasses[5]) ? groupingClasses[5] : '' - - return (<> -

{banner.title}

- {banner.byline && (
{banner.byline}
)} - {banner.contentBefore && (
banner.contentBefore
)} - {banner.video && ( - - )} - {banner.contentAfter && (
banner.contentAfter
)} - {banner.cta && ( -
- -
- )} - ) -} - -export { - BannerBlockComponent as default, - type BannerGrouping as AssetBannderGroupingType -} diff --git a/pkgs/luxdefi-ui/blocks/components/index.ts b/pkgs/luxdefi-ui/blocks/components/index.ts index 06f1ac5a..3ccfe1e1 100644 --- a/pkgs/luxdefi-ui/blocks/components/index.ts +++ b/pkgs/luxdefi-ui/blocks/components/index.ts @@ -1,5 +1,4 @@ import AccordianBlock from './accordian-block' -import BannerBlock from './banner-block' import BlockFactory from './block-factory' import CardBlock from './card-block' import CTABlock from './cta-block' @@ -11,7 +10,6 @@ import SpaceBlock from './space-block' export { AccordianBlock as AccordianBlockComponent, - BannerBlock as BannerBlockComponent, BlockFactory, CardBlock as CardBlockComponent, CTABlock as CTABlockComponent, diff --git a/pkgs/luxdefi-ui/blocks/def/banner-block.ts b/pkgs/luxdefi-ui/blocks/def/banner-block.ts deleted file mode 100644 index cf5632ee..00000000 --- a/pkgs/luxdefi-ui/blocks/def/banner-block.ts +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import type Block from './block' -import type VideoBlock from './video-block' -import type CTABlock from './cta-block' - -interface BannerBlock extends Block { - blockType: 'banner' - title: string - byline?: string - contentBefore?: React.ReactNode - video?: VideoBlock - contentAfter?: React.ReactNode - cta?: CTABlock -} - -export { - type BannerBlock as default -} diff --git a/pkgs/luxdefi-ui/blocks/def/index.ts b/pkgs/luxdefi-ui/blocks/def/index.ts index 76aaaa3d..3b61cb20 100644 --- a/pkgs/luxdefi-ui/blocks/def/index.ts +++ b/pkgs/luxdefi-ui/blocks/def/index.ts @@ -1,5 +1,4 @@ import type AccordianBlock from './accordian-block' -import type BannerBlock from './banner-block' import type Block from './block' import type CardBlock from './card-block' import type CTABlock from './cta-block' @@ -13,7 +12,6 @@ import type SpecialBlock from './special-block' export { type AccordianBlock, - type BannerBlock, type Block, type CardBlock, type CTABlock, diff --git a/pkgs/luxdefi-ui/index.ts b/pkgs/luxdefi-ui/index.ts index 1d30e4a1..bc34e8ae 100644 --- a/pkgs/luxdefi-ui/index.ts +++ b/pkgs/luxdefi-ui/index.ts @@ -18,4 +18,3 @@ export { } from './types' export * from './primitives' -export * from './next' diff --git a/pkgs/luxdefi-ui/package.json b/pkgs/luxdefi-ui/package.json index 6aa72b72..e74ac06f 100644 --- a/pkgs/luxdefi-ui/package.json +++ b/pkgs/luxdefi-ui/package.json @@ -1,6 +1,6 @@ { "name": "@luxdefi/ui", - "version": "0.2.2", + "version": "0.2.3", "description": "Library that contains shared UI primitives, styles, and core types", "publishConfig": { "registry": "https://registry.npmjs.org/", diff --git a/pkgs/luxdefi-ui/primitives/video-player.tsx b/pkgs/luxdefi-ui/primitives/video-player.tsx index 66e8e0aa..738a21c4 100644 --- a/pkgs/luxdefi-ui/primitives/video-player.tsx +++ b/pkgs/luxdefi-ui/primitives/video-player.tsx @@ -1,19 +1,15 @@ 'use client' import React from 'react' -import type { Dimensions } from '../types' - interface VideoProps extends React.ComponentPropsWithoutRef<"video"> { sources: string[] className?: string - constrainTo?: Dimensions } const VideoPlayer = React.forwardRef( ({ sources, className='', - constrainTo, ...rest }, ref) => {