From 90b267a93b9972d15ae07de44f829deb60b9322b Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Mon, 27 Mar 2023 01:07:51 -0700 Subject: [PATCH] Config cleanup --- .env.example | 2 ++ .eslintrc.json | 2 +- components/Composer.tsx | 4 +-- components/SettingsModal.tsx | 4 +-- lib/theme.ts | 49 ++++++++++++++++++++++++++++++++++++ package-lock.json | 36 +++++++++++++++----------- package.json | 4 +-- pages/_app.tsx | 49 ++---------------------------------- pages/_document.tsx | 6 ++--- pages/index.tsx | 12 ++++----- tsconfig.json | 5 ++++ 11 files changed, 95 insertions(+), 78 deletions(-) create mode 100644 .env.example create mode 100644 lib/theme.ts diff --git a/.env.example b/.env.example new file mode 100644 index 0000000000..ddf4aa97f5 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +# Set the backend API key for OpenAI, so that users don't have to provide one +OPENAI_API_KEY= \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json index bffb357a71..0e81f9b97c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,3 @@ { "extends": "next/core-web-vitals" -} +} \ No newline at end of file diff --git a/components/Composer.tsx b/components/Composer.tsx index 94ffdb6a78..70c579ec31 100644 --- a/components/Composer.tsx +++ b/components/Composer.tsx @@ -10,8 +10,8 @@ import StopOutlinedIcon from '@mui/icons-material/StopOutlined'; import TelegramIcon from '@mui/icons-material/Telegram'; import { NoSSR } from './util/NoSSR'; -import { useComposerStore } from '../lib/store'; -import { useSpeechRecognition } from '../lib/use-speech-recognition'; +import { useComposerStore } from '@/lib/store'; +import { useSpeechRecognition } from '@/lib/use-speech-recognition'; /// Text template helpers diff --git a/components/SettingsModal.tsx b/components/SettingsModal.tsx index 180fb1660e..4945a8f386 100644 --- a/components/SettingsModal.tsx +++ b/components/SettingsModal.tsx @@ -3,10 +3,10 @@ import { shallow } from 'zustand/shallow'; import { Box, Button, Input, Modal, ModalClose, ModalDialog, Option, Select, Typography } from '@mui/joy'; -import { ChatModelId, ChatModels } from '../lib/data'; +import { ChatModelId, ChatModels } from '@/lib/data'; import { Link } from './util/Link'; import { NoSSR } from './util/NoSSR'; -import { useSettingsStore } from '../lib/store'; +import { useSettingsStore } from '@/lib/store'; export const isValidOpenAIApiKey = (apiKey?: string) => diff --git a/lib/theme.ts b/lib/theme.ts new file mode 100644 index 0000000000..e251140a19 --- /dev/null +++ b/lib/theme.ts @@ -0,0 +1,49 @@ +import createCache from '@emotion/cache'; +import { Inter, JetBrains_Mono } from 'next/font/google'; +import { extendTheme } from '@mui/joy'; + + +// Theme & Fonts + +const inter = Inter({ + weight: ['400', '500', '600', '700'], + subsets: ['latin'], + display: 'swap', + fallback: ['Helvetica', 'Arial', 'sans-serif'], +}); + +const jetBrainsMono = JetBrains_Mono({ + weight: ['400', '500', '600', '700'], + subsets: ['latin'], + display: 'swap', + fallback: ['monospace'], +}); + +export const theme = extendTheme({ + fontFamily: { + body: inter.style.fontFamily, + code: jetBrainsMono.style.fontFamily, + }, +}); + +export const bodyFontClassName = inter.className; + + +// Emotion Cache (with insertion point on the SSR pass) + +const isBrowser = typeof document !== 'undefined'; + +export function createEmotionCache() { + let insertionPoint; + + if (isBrowser) { + // On the client side, _document.tsx has a meta tag with the name "emotion-insertion-point" at the top of the . + // This assures that MUI styles are loaded first, and allows allows developers to easily override MUI styles with other solutions like CSS modules. + const emotionInsertionPoint = document.querySelector( + 'meta[name="emotion-insertion-point"]', + ); + insertionPoint = emotionInsertionPoint ?? undefined; + } + + return createCache({ key: 'mui-style', insertionPoint }); +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b9ecaa3cf7..bc3c3d4870 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "nextjs-chatgpt-app", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "nextjs-chatgpt-app", - "version": "0.1.0", + "version": "0.2.0", "dependencies": { "@codesandbox/sandpack-react": "^2.1.11", "@emotion/react": "^11.10.6", @@ -23,7 +23,7 @@ "zustand": "^4.3.6" }, "devDependencies": { - "@types/node": "^18.15.8", + "@types/node": "^18.15.10", "@types/prismjs": "^1.26.0", "@types/react": "^18.0.29", "@types/react-dom": "^18.0.11", @@ -1268,9 +1268,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "18.15.8", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.8.tgz", - "integrity": "sha512-kzGNJZ57XEH7RdckxZ7wfRjB9hgZABF+NLgR1B2zogUvV0gmK0/60VYA4yb4oKZckPiiJlmmfpdqTfCN0VRX+Q==", + "version": "18.15.10", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.10.tgz", + "integrity": "sha512-9avDaQJczATcXgfmMAW3MIWArOO7A+m90vuCFLr8AotWf8igO/mRoYukrk2cqZVtv38tHs33retzHEilM7FpeQ==", "dev": true }, "node_modules/@types/parse-json": { @@ -1757,9 +1757,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001469", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz", - "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==", + "version": "1.0.30001470", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001470.tgz", + "integrity": "sha512-065uNwY6QtHCBOExzbV6m236DDhYCCtPmQUCoQtwkVqzud8v5QPidoMr6CoMkC2nfp6nksjttqWQRRh75LqUmA==", "funding": [ { "type": "opencollective", @@ -2896,9 +2896,9 @@ } }, "node_modules/get-tsconfig": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.4.0.tgz", - "integrity": "sha512-0Gdjo/9+FzsYhXCEFueo2aY1z1tpXrxWZzP7k8ul9qt1U5o8rYJwTJYmaeHdrVosYIVYkOy2iwCJ9FdpocJhPQ==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.5.0.tgz", + "integrity": "sha512-MjhiaIWCJ1sAU4pIQ5i5OfOuHHxVo1oYeNsWTON7jxYkod8pHocXeh+SSbmu5OZZZK73B6cbJ2XADzXehLyovQ==", "dev": true, "funding": { "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1" @@ -3763,9 +3763,15 @@ } }, "node_modules/nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, diff --git a/package.json b/package.json index 0a5f118047..553dc83d71 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nextjs-chatgpt-app", - "version": "0.1.0", + "version": "0.2.0", "private": true, "scripts": { "dev": "next dev", @@ -24,7 +24,7 @@ "zustand": "^4.3.6" }, "devDependencies": { - "@types/node": "^18.15.8", + "@types/node": "^18.15.10", "@types/prismjs": "^1.26.0", "@types/react": "^18.0.29", "@types/react-dom": "^18.0.11", diff --git a/pages/_app.tsx b/pages/_app.tsx index 866c322cba..a8a8c4ce76 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,61 +1,16 @@ import * as React from 'react'; import Head from 'next/head'; -import createCache from '@emotion/cache'; import { Analytics as VercelAnalytics } from '@vercel/analytics/react'; import { AppProps } from 'next/app'; import { CacheProvider, EmotionCache } from '@emotion/react'; -import { CssBaseline, CssVarsProvider, extendTheme } from '@mui/joy'; -import { Inter, JetBrains_Mono } from 'next/font/google'; +import { CssBaseline, CssVarsProvider } from '@mui/joy'; - -// Application Theme (JoyUI = MUI) & Fonts (Next.js) - -const inter = Inter({ - weight: ['400', '500', '600', '700'], - subsets: ['latin'], - display: 'swap', - fallback: ['Helvetica', 'Arial', 'sans-serif'], -}); - -const jetBrainsMono = JetBrains_Mono({ - weight: ['400', '500', '600', '700'], - subsets: ['latin'], - display: 'swap', - fallback: ['monospace'], -}); - -const theme = extendTheme({ - fontFamily: { - body: inter.style.fontFamily, - code: jetBrainsMono.style.fontFamily, - }, -}); - -export const bodyFontClassName = inter.className; +import { createEmotionCache, theme } from '@/lib/theme'; // Client-side cache, shared for the whole session of the user in the browser. - -const isBrowser = typeof document !== 'undefined'; - -export function createEmotionCache() { - let insertionPoint; - - if (isBrowser) { - // On the client side, _document.tsx has a meta tag with the name "emotion-insertion-point" at the top of the . - // This assures that MUI styles are loaded first, and allows allows developers to easily override MUI styles with other solutions like CSS modules. - const emotionInsertionPoint = document.querySelector( - 'meta[name="emotion-insertion-point"]', - ); - insertionPoint = emotionInsertionPoint ?? undefined; - } - - return createCache({ key: 'mui-style', insertionPoint }); -} - const clientSideEmotionCache = createEmotionCache(); - export interface MyAppProps extends AppProps { emotionCache?: EmotionCache; } diff --git a/pages/_document.tsx b/pages/_document.tsx index 2902099037..215a4fc25b 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import { AppType } from 'next/app'; -import Document, { DocumentContext, DocumentProps, Head, Html, Main, NextScript } from 'next/document'; - +import { default as Document, DocumentContext, DocumentProps, Head, Html, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import { getInitColorSchemeScript } from '@mui/joy/styles'; -import { bodyFontClassName, createEmotionCache, MyAppProps } from './_app'; +import { MyAppProps } from './_app'; +import { bodyFontClassName, createEmotionCache } from '@/lib/theme'; interface MyDocumentProps extends DocumentProps { diff --git a/pages/index.tsx b/pages/index.tsx index 5876c86e79..fc79968838 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -8,12 +8,12 @@ import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined'; import SmartToyTwoToneIcon from '@mui/icons-material/SmartToyTwoTone'; import { ApiChatInput } from './api/chat'; -import { ChatModels, SystemPurposeId, SystemPurposes } from '../lib/data'; -import { Composer } from '../components/Composer'; -import { Message, UiMessage } from '../components/Message'; -import { NoSSR } from '../components/util/NoSSR'; -import { isValidOpenAIApiKey, SettingsModal } from '../components/SettingsModal'; -import { useSettingsStore } from '../lib/store'; +import { ChatModels, SystemPurposeId, SystemPurposes } from '@/lib/data'; +import { Composer } from '@/components/Composer'; +import { Message, UiMessage } from '@/components/Message'; +import { NoSSR } from '@/components/util/NoSSR'; +import { isValidOpenAIApiKey, SettingsModal } from '@/components/SettingsModal'; +import { useSettingsStore } from '@/lib/store'; /// UI Messages configuration diff --git a/tsconfig.json b/tsconfig.json index 0f7aeb9655..02ae1352e3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,6 +4,7 @@ "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, + "baseUrl": ".", "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, @@ -15,6 +16,10 @@ "jsx": "preserve", "incremental": true, "jsxImportSource": "@emotion/react", + "paths": { + "@/components/*": ["components/*"], + "@/lib/*": ["lib/*"] + }, }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"]