Skip to content

Commit

Permalink
[WebConsoleV2] Initialize web console 2.0 client (#420)
Browse files Browse the repository at this point in the history
* Created by Create React App with ejected webpack configs
* Language: TypeScript
* CSS: Less + styled-components
* Store: Recoil
* UI Lib: Ant Design
  • Loading branch information
waynecz authored Nov 20, 2020
1 parent 0ee821d commit 2d95141
Show file tree
Hide file tree
Showing 62 changed files with 22,534 additions and 0 deletions.
1 change: 1 addition & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.js]
quote_type = single
Expand Down
13 changes: 13 additions & 0 deletions web_console_v2/client/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
3 changes: 3 additions & 0 deletions web_console_v2/client/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.vscode/*
config/*
scripts/*
46 changes: 46 additions & 0 deletions web_console_v2/client/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'prettier'],
extends: [
// 'plugin:@typescript-eslint/eslint-recommended',
// 'plugin:@typescript-eslint/recommended',
'react-app',
// 'prettier/@typescript-eslint',
'prettier',
],
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
},
parserOptions: {
sourceType: 'module',
},
rules: {
'no-console': isProd ? ['error', { allow: ['error'] }] : 'off',
'no-debugger': isProd ? 'error' : 'off',
'comma-style': ['error', 'last'],
'react/self-closing-comp': [
'error',
{
component: true,
html: true,
},
],
semi: 'off',
'@typescript-eslint/semi': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'prettier/prettier': ['warn', {}, { usePrettierrc: true }],
},
overrides: [
{
files: ['**/tests/*.{j,t}s?(x)', '**/tests/**/*.spec.{j,t}s?(x)'],
env: {
jest: true,
},
},
],
}
2 changes: 2 additions & 0 deletions web_console_v2/client/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
; Force to use official registry
registry=https://registry.npmjs.org/
8 changes: 8 additions & 0 deletions web_console_v2/client/.prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = {
trailingComma: 'all',
semi: false,
singleQuote: true,
printWidth: 100,
useTabs: false,
tabWidth: 2,
};
File renamed without changes.
106 changes: 106 additions & 0 deletions web_console_v2/client/config/env.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@


const fs = require('fs');
const path = require('path');
const paths = require('./paths');

// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];

const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.'
);
}

// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
const dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
`${paths.dotenv}.${NODE_ENV}`,
paths.dotenv,
].filter(Boolean);

// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set. Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
})
);
}
});

// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebook/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter(folder => folder && !path.isAbsolute(folder))
.map(folder => path.resolve(appDirectory, folder))
.join(path.delimiter);

// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in webpack configuration.
const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
// We support configuring the sockjs pathname during development.
// These settings let a developer run multiple simultaneous projects.
// They are used as the connection `hostname`, `pathname` and `port`
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
// and `sockPort` options in webpack-dev-server.
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
// Whether or not react-refresh is enabled.
// react-refresh is not 100% stable at this time,
// which is why it's disabled by default.
// It is defined here so it is available in the webpackHotDevClient.
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
}
);
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};

return { raw, stringified };
}

module.exports = getClientEnvironment;
66 changes: 66 additions & 0 deletions web_console_v2/client/config/getHttpsConfig.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@


const fs = require('fs');
const path = require('path');
const crypto = require('crypto');
const chalk = require('react-dev-utils/chalk');
const paths = require('./paths');

// Ensure the certificate and key provided are valid and if not
// throw an easy to debug error
function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
let encrypted;
try {
// publicEncrypt will throw an error with an invalid cert
encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
} catch (err) {
throw new Error(
`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
);
}

try {
// privateDecrypt will throw an error with an invalid key
crypto.privateDecrypt(key, encrypted);
} catch (err) {
throw new Error(
`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
err.message
}`
);
}
}

// Read file and throw an error if it doesn't exist
function readEnvFile(file, type) {
if (!fs.existsSync(file)) {
throw new Error(
`You specified ${chalk.cyan(
type
)} in your env, but the file "${chalk.yellow(file)}" can't be found.`
);
}
return fs.readFileSync(file);
}

// Get the https config
// Return cert files if provided in env, otherwise just true or false
function getHttpsConfig() {
const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
const isHttps = HTTPS === 'true';

if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
const config = {
cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
};

validateKeyAndCerts({ ...config, keyFile, crtFile });
return config;
}
return isHttps;
}

module.exports = getHttpsConfig;
14 changes: 14 additions & 0 deletions web_console_v2/client/config/jest/cssTransform.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@


// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html

module.exports = {
process() {
return 'module.exports = {};';
},
getCacheKey() {
// The output is always the same.
return 'cssTransform';
},
};
40 changes: 40 additions & 0 deletions web_console_v2/client/config/jest/fileTransform.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@


const path = require('path');
const camelcase = require('camelcase');

// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html

module.exports = {
process(src, filename) {
const assetFilename = JSON.stringify(path.basename(filename));

if (filename.match(/\.svg$/)) {
// Based on how SVGR generates a component name:
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
const pascalCaseFilename = camelcase(path.parse(filename).name, {
pascalCase: true,
});
const componentName = `Svg${pascalCaseFilename}`;
return `const React = require('react');
module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
return {
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: ref,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
};
}),
};`;
}

return `module.exports = ${assetFilename};`;
},
};
Loading

0 comments on commit 2d95141

Please sign in to comment.