From a650f88d7365450fa1d13f38629594069e0fb86d Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Mon, 26 Dec 2022 16:46:38 +0300 Subject: [PATCH] constants: add colors env: add NEXT_PUBLIC_USE_DEV_COLORS --- .env | 8 +++----- @packages/ui/colors.js | 11 ----------- config/schema/env.js | 7 ++++--- config/schema/runtime-config.js | 4 +--- constants/colors.js | 15 +++++++++++++++ next.config.js | 7 ++++++- pages/_app.jsx | 2 +- styles/colors.js | 14 ++++++++++++++ styles/global-style.js | 14 ++++++++++++++ 9 files changed, 58 insertions(+), 24 deletions(-) delete mode 100644 @packages/ui/colors.js create mode 100644 constants/colors.js create mode 100644 styles/colors.js create mode 100644 styles/global-style.js diff --git a/.env b/.env index a5fd32f..a9311a2 100644 --- a/.env +++ b/.env @@ -1,11 +1,9 @@ +####### COMMON ####### +NEXT_PUBLIC_USE_DEV_COLORS= + ####### USERS ######## USERS_SUPER=["akalinina","vchikalkin"] -####### Colors ######## -NEXT_PUBLIC_COLOR_PRIMARY= -NEXT_PUBLIC_COLOR_SECONDARY= -NEXT_PUBLIC_COLOR_TERTIARTY= - ####### URLS ######## NEXT_PUBLIC_URL_GET_USER_DIRECT= NEXT_PUBLIC_URL_CRM_GRAPHQL_DIRECT= diff --git a/@packages/ui/colors.js b/@packages/ui/colors.js deleted file mode 100644 index 853ac50..0000000 --- a/@packages/ui/colors.js +++ /dev/null @@ -1,11 +0,0 @@ -/* eslint-disable import/prefer-default-export */ -import { createGlobalStyle } from 'styled-components'; - -export const GlobalStyle = createGlobalStyle` -:root { - --color-background: rgb(240, 240, 240); - --color-primary: ${process.env.NEXT_PUBLIC_COLOR_PRIMARY}; - --color-secondary: ${process.env.NEXT_PUBLIC_COLOR_SECONDARY}; - --color-tertiarty: ${process.env.NEXT_PUBLIC_COLOR_TERTIARTY}; - } -`; diff --git a/config/schema/env.js b/config/schema/env.js index 72fbfe8..c7163a8 100644 --- a/config/schema/env.js +++ b/config/schema/env.js @@ -2,13 +2,14 @@ const { z } = require('zod'); const envSchema = z.object({ + NEXT_PUBLIC_USE_DEV_COLORS: z + .unknown() + .optional() + .transform((val) => !!val), NEXT_PUBLIC_BASE_PATH: z.string().optional(), NEXT_PUBLIC_URL_CRM_GRAPHQL_DIRECT: z.string(), NEXT_PUBLIC_URL_GET_USER_DIRECT: z.string(), NEXT_PUBLIC_URL_CORE_FINGAP_DIRECT: z.string(), - NEXT_PUBLIC_COLOR_PRIMARY: z.string(), - NEXT_PUBLIC_COLOR_SECONDARY: z.string(), - NEXT_PUBLIC_COLOR_TERTIARTY: z.string(), }); module.exports = envSchema; diff --git a/config/schema/runtime-config.js b/config/schema/runtime-config.js index 0dbb9bb..a791705 100644 --- a/config/schema/runtime-config.js +++ b/config/schema/runtime-config.js @@ -3,9 +3,7 @@ const envSchema = require('./env'); const publicRuntimeConfigSchema = envSchema.pick({ NEXT_PUBLIC_BASE_PATH: true, - NEXT_PUBLIC_COLOR_PRIMARY: true, - NEXT_PUBLIC_COLOR_SECONDARY: true, - NEXT_PUBLIC_COLOR_TERTIARTY: true, + NEXT_PUBLIC_USE_DEV_COLORS: true, }); const serverRuntimeConfigSchema = envSchema.pick({ diff --git a/constants/colors.js b/constants/colors.js new file mode 100644 index 0000000..7e377c2 --- /dev/null +++ b/constants/colors.js @@ -0,0 +1,15 @@ +const COLORS_PROD = { + COLOR_PRIMARY: '#1C01A9', + COLOR_SECONDARY: '#3A0185', + COLOR_TERTIARTY: '#580161', +}; +const COLORS_DEV = { + COLOR_PRIMARY: '#BF3676', + COLOR_SECONDARY: '#FD4047', + COLOR_TERTIARTY: '#FF9112', +}; + +module.exports = { + COLORS_PROD, + COLORS_DEV, +}; diff --git a/next.config.js b/next.config.js index ec0b7fe..1408633 100644 --- a/next.config.js +++ b/next.config.js @@ -3,6 +3,7 @@ const { withPlugins } = require('next-composed-plugins'); const withLess = require('next-with-less'); const withGraphQL = require('next-plugin-graphql'); +const { COLORS_DEV, COLORS_PROD } = require('./constants/colors'); const envSchema = require('./config/schema/env'); const urls = require('./constants/urls'); const { devices } = require('./@packages/ui/screens'); @@ -48,12 +49,16 @@ const nextConfig = { const plugins = [withLess, withGraphQL]; +const colorPrimary = env.NEXT_PUBLIC_USE_DEV_COLORS + ? COLORS_DEV.COLOR_PRIMARY + : COLORS_PROD.COLOR_PRIMARY; + const config = { ...nextConfig, lessLoaderOptions: { lessOptions: { modifyVars: { - 'primary-color': env.NEXT_PUBLIC_COLOR_PRIMARY, + 'primary-color': colorPrimary, }, }, }, diff --git a/pages/_app.jsx b/pages/_app.jsx index d10ecb1..382f82b 100644 --- a/pages/_app.jsx +++ b/pages/_app.jsx @@ -7,8 +7,8 @@ import 'normalize.css'; import { useMemo } from 'react'; import StoreProvider from 'stores/Provider'; import { ThemeProvider } from 'styled-components'; +import { GlobalStyle } from 'styles/global-style'; import { trpcClient } from 'trpc/client'; -import { GlobalStyle } from 'ui/colors'; import { ConfigProvider, ru_RU } from 'ui/elements/config'; import 'ui/elements/styles/antd.less'; import theme from 'ui/theme'; diff --git a/styles/colors.js b/styles/colors.js new file mode 100644 index 0000000..49dc3f8 --- /dev/null +++ b/styles/colors.js @@ -0,0 +1,14 @@ +import getConfig from 'next/config'; +import { publicRuntimeConfigSchema } from '../config/schema/runtime-config'; +import { COLORS_DEV, COLORS_PROD } from '../constants/colors'; + +const { publicRuntimeConfig } = getConfig(); +const { NEXT_PUBLIC_USE_DEV_COLORS } = publicRuntimeConfigSchema.parse(publicRuntimeConfig); + +export default function getColors() { + if (NEXT_PUBLIC_USE_DEV_COLORS) { + return COLORS_DEV; + } + + return COLORS_PROD; +} diff --git a/styles/global-style.js b/styles/global-style.js new file mode 100644 index 0000000..4c818fb --- /dev/null +++ b/styles/global-style.js @@ -0,0 +1,14 @@ +/* eslint-disable import/prefer-default-export */ +import { createGlobalStyle } from 'styled-components'; +import getColors from './colors'; + +const { COLOR_PRIMARY, COLOR_SECONDARY, COLOR_TERTIARTY } = getColors(); + +export const GlobalStyle = createGlobalStyle` +:root { + --color-background: rgb(240, 240, 240); + --color-primary: ${COLOR_PRIMARY}; + --color-secondary: ${COLOR_SECONDARY}; + --color-tertiarty: ${COLOR_TERTIARTY}; + } +`;