-
Notifications
You must be signed in to change notification settings - Fork 403
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(@tabnews/ui): add lib to share UI code
- Loading branch information
1 parent
a67be7f
commit a65c71c
Showing
7 changed files
with
40 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1 @@ | ||
| import Document, { Head, Html, Main, NextScript } from 'next/document'; | ||
| import Script from 'next/script'; | ||
| import { ServerStyleSheet } from 'styled-components'; | ||
|
|
||
| const noFlashScript = `if (['auto','night'].includes(localStorage.getItem('colorMode'))) | ||
| document.documentElement.setAttribute('data-no-flash', true)`; | ||
|
|
||
| export default class MyDocument extends Document { | ||
| static async getInitialProps(ctx) { | ||
| const sheet = new ServerStyleSheet(); | ||
| const originalRenderPage = ctx.renderPage; | ||
|
|
||
| try { | ||
| ctx.renderPage = () => | ||
| originalRenderPage({ | ||
| enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), | ||
| }); | ||
|
|
||
| const initialProps = await Document.getInitialProps(ctx); | ||
| return { | ||
| ...initialProps, | ||
| styles: ( | ||
| <> | ||
| {initialProps.styles} | ||
| {sheet.getStyleElement()} | ||
| </> | ||
| ), | ||
| }; | ||
| } finally { | ||
| sheet.seal(); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <Html lang="pt-br"> | ||
| <Head /> | ||
| <body> | ||
| <Script id="theme" strategy="beforeInteractive"> | ||
| {noFlashScript} | ||
| </Script> | ||
| <Main /> | ||
| <NextScript /> | ||
| </body> | ||
| </Html> | ||
| ); | ||
| } | ||
| } | ||
| export { Document as default } from '@tabnews/ui/document'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,11 @@ | ||
| import { useEffect, useLayoutEffect, useState } from 'react'; | ||
| import { AutoThemeProvider, NextNProgress, ViewerStyles } from '@/TabNewsUI'; | ||
|
|
||
| import { BaseStyles, NextNProgress, PrimerThemeProvider, SSRProvider, useTheme, ViewerStyles } from '@/TabNewsUI'; | ||
|
|
||
| // script to be called before interactive in _document.js | ||
| // if (['auto','night'].includes(localStorage.getItem('colorMode'))) | ||
| // document.documentElement.setAttribute('data-no-flash', true) | ||
|
|
||
| const removeNoFlashStyle = () => setTimeout(() => document.documentElement.removeAttribute('data-no-flash')); | ||
| const useBrowserLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect; | ||
|
|
||
| export default function ThemeProvider({ children, defaultColorMode, ...props }) { | ||
| const [colorMode, setColorMode] = useState(defaultColorMode === 'night' ? 'night' : 'day'); | ||
|
|
||
| useBrowserLayoutEffect(() => { | ||
| const cachedColorMode = localStorage.getItem('colorMode') || colorMode; | ||
| if (cachedColorMode == colorMode) return; | ||
| setColorMode(cachedColorMode); | ||
| removeNoFlashStyle(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <SSRProvider> | ||
| <PrimerThemeProvider colorMode={colorMode} {...props}> | ||
| <BaseStyles> | ||
| <NextNProgress options={{ showSpinner: false }} /> | ||
| <NoFleshGlobalStyle /> | ||
| {children} | ||
| <ViewerStyles /> | ||
| </BaseStyles> | ||
| </PrimerThemeProvider> | ||
| </SSRProvider> | ||
| ); | ||
| } | ||
|
|
||
| function NoFleshGlobalStyle() { | ||
| const { | ||
| resolvedColorScheme, | ||
| theme: { colors }, | ||
| } = useTheme(); | ||
| export default function ThemeProvider({ children, ...props }) { | ||
| return ( | ||
| <style jsx global>{` | ||
| html[data-no-flash='true']:root { | ||
| visibility: hidden; | ||
| } | ||
| html:root { | ||
| color-scheme: ${resolvedColorScheme}; | ||
| } | ||
| body { | ||
| background: ${colors.canvas.default}; | ||
| } | ||
| `}</style> | ||
| <AutoThemeProvider {...props}> | ||
| <NextNProgress options={{ showSpinner: false }} /> | ||
| {children} | ||
| <ViewerStyles /> | ||
| </AutoThemeProvider> | ||
| ); | ||
| } |