Pack Chakra theme into NPM package (#2115)

* build package

* update version

* fix name collision

* add workflow

.github/workflows/chakra-npm-publisher.yml

+name: Publish Chakra theme package to NPM
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Package version
+        type: string
+        required: true
+  workflow_call:
+    inputs:
+      version:
+        description: Package version
+        type: string
+        required: true
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    name: Publish package to NPM registry
+    permissions:
+      id-token: write
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      # Also it will setup .npmrc file to publish to npm
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Update package version
+        run: |
+          cd ./theme
+          npm version ${{ inputs.version }}
+    
+      - name: Build the package
+        run: |
+          cd ./theme
+          yarn
+          yarn build
+    
+      - name: Publish to NPM registry
+        run: |
+          cd ./theme
+          npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

configs/app/utils.ts

@@ -5,7 +5,7 @@ export const replaceQuotes = (value: string | undefined) => value?.replaceAll('\
 
 export const getEnvValue = (envName: string) => {
   // eslint-disable-next-line no-restricted-properties
-  const envs = isBrowser() ? window.__envs : process.env;
+  const envs = (isBrowser() ? window.__envs : process.env) ?? {};
 
   if (isBrowser() && envs.NEXT_PUBLIC_APP_INSTANCE === 'pw') {
     const storageValue = localStorage.getItem(envName);

jest/lib.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { AppContextProvider } from 'lib/contexts/app';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import { SocketProvider } from 'lib/socket/context';
-import theme from 'theme';
+import theme from 'theme/theme';
 
 import 'lib/setLocale';
 

lib/contexts/chakra.tsx

@@ -6,7 +6,7 @@ import {
 import type { ChakraProviderProps } from '@chakra-ui/react';
 import React from 'react';
 
-import theme from 'theme';
+import theme from 'theme/theme';
 
 interface Props extends ChakraProviderProps {
   cookies?: string;

pages/_document.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import logRequestFromBot from 'nextjs/utils/logRequestFromBot';
 import * as serverTiming from 'nextjs/utils/serverTiming';
 
-import theme from 'theme';
+import theme from 'theme/theme';
 import * as svgSprite from 'ui/shared/IconSvg';
 
 class MyDocument extends Document {

playwright/TestApp.tsx

@@ -12,7 +12,7 @@ import config from 'configs/app';
 import { AppContextProvider } from 'lib/contexts/app';
 import { SocketProvider } from 'lib/socket/context';
 import currentChain from 'lib/web3/currentChain';
-import theme from 'theme';
+import theme from 'theme/theme';
 
 import { port as socketPort } from './utils/socket';
 

theme/.gitignore

+/node_modules
+/dist
\ No newline at end of file

theme/package.json

+{
+  "name": "@blockscout/chakra-theme",
+  "version": "1.32.0",
+  "main": "./dist/index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "yarn webpack-cli -c ./webpack.config.js"
+  },
+  "devDependencies": {
+    "ts-loader": "^9.4.4",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "tsconfig-paths-webpack-plugin": "^4.1.0"
+  },
+  "files": [
+    "/dist"
+  ]
+}

theme/tsconfig.json

+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"noEmit": false,
+		"target": "es2016",
+		"module": "CommonJS",
+		"moduleResolution": "node",
+		"paths": {
+			"nextjs-routes": ["./nextjs/nextjs-routes.d.ts"],
+		}
+	},
+	"include": [ 
+		"../types/**/*.ts", 
+		"../configs/app/**/*.ts", 
+		"../global.d.ts", 
+		"./theme.ts"
+	],
+	"tsc-alias": {
+	  "verbose": true,
+	  "resolveFullPaths": true,
+	}
+}
+  
\ No newline at end of file

theme/webpack.config.js

+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+const config = {
+  mode: 'production',
+  entry: path.resolve(__dirname) + '/theme.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: [ '.tsx', '.ts', '.js' ],
+    plugins: [ new TsconfigPathsPlugin({ configFile: './tsconfig.json' }) ],
+  },
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname) + '/dist',
+    library: {
+      type: 'commonjs',
+    },
+  },
+  optimization: {
+    minimize: false,
+  },
+};
+
+module.exports = config;

ui/shared/FancySelect/utils.ts

@@ -3,7 +3,7 @@ import type { Size, ChakraStylesConfig } from 'chakra-react-select';
 
 import type { Option } from './types';
 
-import theme from 'theme';
+import theme from 'theme/theme';
 import getFormStyles from 'theme/utils/getFormStyles';
 
 function getValueContainerStyles(size?: Size) {