Pack Chakra theme into NPM package (#2115)

* build package

* update version

* fix name collision

* add workflow

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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,2 @@
+/node_modules
+/dist