@common-stack/generate-plugin 5.0.4-alpha.5 → 5.0.4-alpha.9

package/lib/generators/add-frontend/templates/public/css/dashboard.css

@@ -0,0 +1,491 @@
+table {
+    background-color: transparent;
+  }
+  caption {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: #777777;
+    text-align: left;
+  }
+  th {
+    text-align: left;
+  }
+  .table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 20px;
+  }
+  .table > thead > tr > th,
+  .table > tbody > tr > th,
+  .table > tfoot > tr > th,
+  .table > thead > tr > td,
+  .table > tbody > tr > td,
+  .table > tfoot > tr > td {
+    padding: 8px;
+    line-height: 1.42857143;
+    vertical-align: top;
+    border-top: 1px solid #dddddd;
+  }
+  .table > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #dddddd;
+  }
+  .table > caption + thead > tr:first-child > th,
+  .table > colgroup + thead > tr:first-child > th,
+  .table > thead:first-child > tr:first-child > th,
+  .table > caption + thead > tr:first-child > td,
+  .table > colgroup + thead > tr:first-child > td,
+  .table > thead:first-child > tr:first-child > td {
+    border-top: 0;
+  }
+  .table > tbody + tbody {
+    border-top: 2px solid #dddddd;
+  }
+  .table .table {
+    background-color: #ffffff;
+  }
+  .table-condensed > thead > tr > th,
+  .table-condensed > tbody > tr > th,
+  .table-condensed > tfoot > tr > th,
+  .table-condensed > thead > tr > td,
+  .table-condensed > tbody > tr > td,
+  .table-condensed > tfoot > tr > td {
+    padding: 5px;
+  }
+  .table-bordered {
+    border: 1px solid #dddddd;
+  }
+  .table-bordered > thead > tr > th,
+  .table-bordered > tbody > tr > th,
+  .table-bordered > tfoot > tr > th,
+  .table-bordered > thead > tr > td,
+  .table-bordered > tbody > tr > td,
+  .table-bordered > tfoot > tr > td {
+    border: 1px solid #dddddd;
+  }
+  .table-bordered > thead > tr > th,
+  .table-bordered > thead > tr > td {
+    border-bottom-width: 2px;
+  }
+  .table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #f9f9f9;
+  }
+  .table-hover > tbody > tr:hover {
+    background-color: #f5f5f5;
+  }
+  table col[class*="col-"] {
+    position: static;
+    float: none;
+    display: table-column;
+  }
+  table td[class*="col-"],
+  table th[class*="col-"] {
+    position: static;
+    float: none;
+    display: table-cell;
+  }
+  .table > thead > tr > td.active,
+  .table > tbody > tr > td.active,
+  .table > tfoot > tr > td.active,
+  .table > thead > tr > th.active,
+  .table > tbody > tr > th.active,
+  .table > tfoot > tr > th.active,
+  .table > thead > tr.active > td,
+  .table > tbody > tr.active > td,
+  .table > tfoot > tr.active > td,
+  .table > thead > tr.active > th,
+  .table > tbody > tr.active > th,
+  .table > tfoot > tr.active > th {
+    background-color: #f5f5f5;
+  }
+  .table-hover > tbody > tr > td.active:hover,
+  .table-hover > tbody > tr > th.active:hover,
+  .table-hover > tbody > tr.active:hover > td,
+  .table-hover > tbody > tr:hover > .active,
+  .table-hover > tbody > tr.active:hover > th {
+    background-color: #e8e8e8;
+  }
+  .table > thead > tr > td.success,
+  .table > tbody > tr > td.success,
+  .table > tfoot > tr > td.success,
+  .table > thead > tr > th.success,
+  .table > tbody > tr > th.success,
+  .table > tfoot > tr > th.success,
+  .table > thead > tr.success > td,
+  .table > tbody > tr.success > td,
+  .table > tfoot > tr.success > td,
+  .table > thead > tr.success > th,
+  .table > tbody > tr.success > th,
+  .table > tfoot > tr.success > th {
+    background-color: #dff0d8;
+  }
+  .table-hover > tbody > tr > td.success:hover,
+  .table-hover > tbody > tr > th.success:hover,
+  .table-hover > tbody > tr.success:hover > td,
+  .table-hover > tbody > tr:hover > .success,
+  .table-hover > tbody > tr.success:hover > th {
+    background-color: #d0e9c6;
+  }
+  .table > thead > tr > td.info,
+  .table > tbody > tr > td.info,
+  .table > tfoot > tr > td.info,
+  .table > thead > tr > th.info,
+  .table > tbody > tr > th.info,
+  .table > tfoot > tr > th.info,
+  .table > thead > tr.info > td,
+  .table > tbody > tr.info > td,
+  .table > tfoot > tr.info > td,
+  .table > thead > tr.info > th,
+  .table > tbody > tr.info > th,
+  .table > tfoot > tr.info > th {
+    background-color: #d9edf7;
+  }
+  .table-hover > tbody > tr > td.info:hover,
+  .table-hover > tbody > tr > th.info:hover,
+  .table-hover > tbody > tr.info:hover > td,
+  .table-hover > tbody > tr:hover > .info,
+  .table-hover > tbody > tr.info:hover > th {
+    background-color: #c4e3f3;
+  }
+  .table > thead > tr > td.warning,
+  .table > tbody > tr > td.warning,
+  .table > tfoot > tr > td.warning,
+  .table > thead > tr > th.warning,
+  .table > tbody > tr > th.warning,
+  .table > tfoot > tr > th.warning,
+  .table > thead > tr.warning > td,
+  .table > tbody > tr.warning > td,
+  .table > tfoot > tr.warning > td,
+  .table > thead > tr.warning > th,
+  .table > tbody > tr.warning > th,
+  .table > tfoot > tr.warning > th {
+    background-color: #fcf8e3;
+  }
+  .table-hover > tbody > tr > td.warning:hover,
+  .table-hover > tbody > tr > th.warning:hover,
+  .table-hover > tbody > tr.warning:hover > td,
+  .table-hover > tbody > tr:hover > .warning,
+  .table-hover > tbody > tr.warning:hover > th {
+    background-color: #faf2cc;
+  }
+  .table > thead > tr > td.danger,
+  .table > tbody > tr > td.danger,
+  .table > tfoot > tr > td.danger,
+  .table > thead > tr > th.danger,
+  .table > tbody > tr > th.danger,
+  .table > tfoot > tr > th.danger,
+  .table > thead > tr.danger > td,
+  .table > tbody > tr.danger > td,
+  .table > tfoot > tr.danger > td,
+  .table > thead > tr.danger > th,
+  .table > tbody > tr.danger > th,
+  .table > tfoot > tr.danger > th {
+    background-color: #f2dede;
+  }
+  .table-hover > tbody > tr > td.danger:hover,
+  .table-hover > tbody > tr > th.danger:hover,
+  .table-hover > tbody > tr.danger:hover > td,
+  .table-hover > tbody > tr:hover > .danger,
+  .table-hover > tbody > tr.danger:hover > th {
+    background-color: #ebcccc;
+  }
+  .table-responsive {
+    overflow-x: auto;
+    min-height: 0.01%;
+  }
+  @media screen and (max-width: 767px) {
+    .table-responsive {
+      width: 100%;
+      margin-bottom: 15px;
+      overflow-y: hidden;
+      -ms-overflow-style: -ms-autohiding-scrollbar;
+      border: 1px solid #dddddd;
+    }
+    .table-responsive > .table {
+      margin-bottom: 0;
+    }
+    .table-responsive > .table > thead > tr > th,
+    .table-responsive > .table > tbody > tr > th,
+    .table-responsive > .table > tfoot > tr > th,
+    .table-responsive > .table > thead > tr > td,
+    .table-responsive > .table > tbody > tr > td,
+    .table-responsive > .table > tfoot > tr > td {
+      white-space: nowrap;
+    }
+    .table-responsive > .table-bordered {
+      border: 0;
+    }
+    .table-responsive > .table-bordered > thead > tr > th:first-child,
+    .table-responsive > .table-bordered > tbody > tr > th:first-child,
+    .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+    .table-responsive > .table-bordered > thead > tr > td:first-child,
+    .table-responsive > .table-bordered > tbody > tr > td:first-child,
+    .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+      border-left: 0;
+    }
+    .table-responsive > .table-bordered > thead > tr > th:last-child,
+    .table-responsive > .table-bordered > tbody > tr > th:last-child,
+    .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+    .table-responsive > .table-bordered > thead > tr > td:last-child,
+    .table-responsive > .table-bordered > tbody > tr > td:last-child,
+    .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+      border-right: 0;
+    }
+    .table-responsive > .table-bordered > tbody > tr:last-child > th,
+    .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+    .table-responsive > .table-bordered > tbody > tr:last-child > td,
+    .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+      border-bottom: 0;
+    }
+  }
+  .clearfix:before,
+  .clearfix:after {
+    content: " ";
+    display: table;
+  }
+  .clearfix:after {
+    clear: both;
+  }
+  .center-block {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .pull-right {
+    float: right !important;
+  }
+  .pull-left {
+    float: left !important;
+  }
+  .hide {
+    display: none !important;
+  }
+  .show {
+    display: block !important;
+  }
+  .invisible {
+    visibility: hidden;
+  }
+  .text-hide {
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  .hidden {
+    display: none !important;
+  }
+  .affix {
+    position: fixed;
+  }
+  @-ms-viewport {
+    width: device-width;
+  }
+  .visible-xs,
+  .visible-sm,
+  .visible-md,
+  .visible-lg {
+    display: none !important;
+  }
+  .visible-xs-block,
+  .visible-xs-inline,
+  .visible-xs-inline-block,
+  .visible-sm-block,
+  .visible-sm-inline,
+  .visible-sm-inline-block,
+  .visible-md-block,
+  .visible-md-inline,
+  .visible-md-inline-block,
+  .visible-lg-block,
+  .visible-lg-inline,
+  .visible-lg-inline-block {
+    display: none !important;
+  }
+  @media (max-width: 767px) {
+    .visible-xs {
+      display: block !important;
+    }
+    table.visible-xs {
+      display: table !important;
+    }
+    tr.visible-xs {
+      display: table-row !important;
+    }
+    th.visible-xs,
+    td.visible-xs {
+      display: table-cell !important;
+    }
+  }
+  @media (max-width: 767px) {
+    .visible-xs-block {
+      display: block !important;
+    }
+  }
+  @media (max-width: 767px) {
+    .visible-xs-inline {
+      display: inline !important;
+    }
+  }
+  @media (max-width: 767px) {
+    .visible-xs-inline-block {
+      display: inline-block !important;
+    }
+  }
+  @media (min-width: 768px) and (max-width: 991px) {
+    .visible-sm {
+      display: block !important;
+    }
+    table.visible-sm {
+      display: table !important;
+    }
+    tr.visible-sm {
+      display: table-row !important;
+    }
+    th.visible-sm,
+    td.visible-sm {
+      display: table-cell !important;
+    }
+  }
+  @media (min-width: 768px) and (max-width: 991px) {
+    .visible-sm-block {
+      display: block !important;
+    }
+  }
+  @media (min-width: 768px) and (max-width: 991px) {
+    .visible-sm-inline {
+      display: inline !important;
+    }
+  }
+  @media (min-width: 768px) and (max-width: 991px) {
+    .visible-sm-inline-block {
+      display: inline-block !important;
+    }
+  }
+  @media (min-width: 992px) and (max-width: 1199px) {
+    .visible-md {
+      display: block !important;
+    }
+    table.visible-md {
+      display: table !important;
+    }
+    tr.visible-md {
+      display: table-row !important;
+    }
+    th.visible-md,
+    td.visible-md {
+      display: table-cell !important;
+    }
+  }
+  @media (min-width: 992px) and (max-width: 1199px) {
+    .visible-md-block {
+      display: block !important;
+    }
+  }
+  @media (min-width: 992px) and (max-width: 1199px) {
+    .visible-md-inline {
+      display: inline !important;
+    }
+  }
+  @media (min-width: 992px) and (max-width: 1199px) {
+    .visible-md-inline-block {
+      display: inline-block !important;
+    }
+  }
+  @media (min-width: 1200px) {
+    .visible-lg {
+      display: block !important;
+    }
+    table.visible-lg {
+      display: table !important;
+    }
+    tr.visible-lg {
+      display: table-row !important;
+    }
+    th.visible-lg,
+    td.visible-lg {
+      display: table-cell !important;
+    }
+  }
+  @media (min-width: 1200px) {
+    .visible-lg-block {
+      display: block !important;
+    }
+  }
+  @media (min-width: 1200px) {
+    .visible-lg-inline {
+      display: inline !important;
+    }
+  }
+  @media (min-width: 1200px) {
+    .visible-lg-inline-block {
+      display: inline-block !important;
+    }
+  }
+  @media (max-width: 767px) {
+    .hidden-xs {
+      display: none !important;
+    }
+  }
+  @media (min-width: 768px) and (max-width: 991px) {
+    .hidden-sm {
+      display: none !important;
+    }
+  }
+  @media (min-width: 992px) and (max-width: 1199px) {
+    .hidden-md {
+      display: none !important;
+    }
+  }
+  @media (min-width: 1200px) {
+    .hidden-lg {
+      display: none !important;
+    }
+  }
+  .visible-print {
+    display: none !important;
+  }
+  @media print {
+    .visible-print {
+      display: block !important;
+    }
+    table.visible-print {
+      display: table !important;
+    }
+    tr.visible-print {
+      display: table-row !important;
+    }
+    th.visible-print,
+    td.visible-print {
+      display: table-cell !important;
+    }
+  }
+  .visible-print-block {
+    display: none !important;
+  }
+  @media print {
+    .visible-print-block {
+      display: block !important;
+    }
+  }
+  .visible-print-inline {
+    display: none !important;
+  }
+  @media print {
+    .visible-print-inline {
+      display: inline !important;
+    }
+  }
+  .visible-print-inline-block {
+    display: none !important;
+  }
+  @media print {
+    .visible-print-inline-block {
+      display: inline-block !important;
+    }
+  }
+  @media print {
+    .hidden-print {
+      display: none !important;
+    }
+  }

package/lib/generators/add-frontend/templates/server.js

@@ -0,0 +1,78 @@
+import express from 'express';
+import compression from 'compression';
+import { createRequestHandler } from '@remix-run/express';
+import { installGlobals } from '@remix-run/node';
+import './env.js';
+import {
+    performCopyOperations,
+} from '@common-stack/rollup-vite-utils/lib/preStartup/configLoader/configLoader.js';
+import config from './app/cde-webconfig.json' assert { type: 'json' };
+
+installGlobals();
+
+Object.keys(config.buildConfig).forEach((key) => {
+    global[key] = config.buildConfig[key];
+});
+
+const startServer = async () => {
+    await performCopyOperations(config);
+
+    const { corsMiddleware } = await import(`./${config.commonPaths.appPath}/${config.commonPaths.frontendStackPath}/backend/middlewares/cors.js`);
+    const { containerMiddleware } = await import(`./${config.commonPaths.appPath}/${config.commonPaths.frontendStackPath}/backend/middlewares/container.js`);
+    const { loadContext } = await import(`./${config.commonPaths.appPath}/${config.commonPaths.frontendStackPath}/load-context.server.js`);
+
+    const viteDevServer =
+        process.env.NODE_ENV === 'production'
+            ? undefined
+            : await import('vite').then((vite) => {
+                  return vite.createServer({
+                      server: { middlewareMode: true },
+                  });
+              });
+
+    const remixHandler = createRequestHandler({
+        getLoadContext: loadContext,
+        build: viteDevServer
+            ? () => viteDevServer.ssrLoadModule('virtual:remix/server-build')
+            : await import('./build/server/index.js'),
+    });
+
+    const app = express();
+
+    app.use(compression());
+    app.disable('x-powered-by');
+
+    if (viteDevServer) {
+        app.use(viteDevServer.middlewares);
+    } else {
+        app.use('/assets', express.static('build/client/assets', { immutable: true, maxAge: '1y' }));
+    }
+
+    app.use(express.static('build/client', { maxAge: '1h' }));
+
+    app.use(corsMiddleware);
+    app.options('*', corsMiddleware);
+
+    app.use(async (req, res, next) => {
+        let isAssetRequest = (url) =>
+            /\.[jt]sx?$/.test(url) ||
+            /@id\/__x00__virtual:/.test(url) ||
+            /@vite\/client/.test(url) ||
+            /node_modules\/vite\/dist\/client\/env/.test(url);
+
+        if (isAssetRequest(req.url)) {
+            next();
+        } else {
+            return await containerMiddleware(req, res, async () => {
+                return remixHandler(req, res, next);
+            });
+        }
+    });
+
+    const port = process.env.PORT || 3000;
+    app.listen(port, () => console.log(`Express server listening at http://localhost:${port}`));
+};
+
+startServer().catch((err) => {
+    console.error('Failed to start server:', err);
+});

package/lib/generators/add-frontend/templates/src/config/public-config.ts.template

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/// <reference path='../../../../typings/index.d.ts' />
+import { logger } from '@cdm-logger/client';
+import { lowerCase } from 'lodash-es';
+/**
+ * This file opens up in public site, so make sure it is
+ * not dependent on any other file that compromises the security.
+ * hello
+ */
+const publicEnv = [
+    'NODE_ENV',
+    'APP_URL',
+    'GA_ID',
+    'GRAPHQL_URL',
+    'LOG_LEVEL',
+    'AUTH0_CLIENT_ID',
+    'AUTH0_DOMAIN',
+    'AUTH0_CUSTOM_DOMAIN',
+    'CLIENT_URL',
+    'APP_NAME',
+    'AUTH0_API_AUDIENCE',
+    'AUTH0_REALM',
+    'PAYPAL_ENVIRONMENT',
+    'STRIPE_PUBLISHABLE_KEY',
+    'AUTH0_TOKEN_GRANTED_TIME',
+    'AUTH0_CUSTOM_CLAIMS_NAMESPACE',
+    'INITIAL_ACCOUNT_PAGE',
+    'SOCIAL_LOGIN_PROVIDERS',
+    'CALLBACK_REDIRECT_URL',
+    'POPUP_REDIRECT_URL',
+    'LAYOUT_SETTINGS',
+    'DEFAULT_EXTENDED_RENEWAL_TIME',
+    'DISABLE_EMAIL_VERIFICATION',
+    'WEB_APP_URL',
+    'LOGOUT_REDIRECT_PATH',
+    'LOGIN_REDIRECT_PATH',
+    'REDIRECT_ON_LOGIN_VISIT',
+    'ENABLE_COOKIE_BASED_AUTH',
+    'APP_DOMAIN',
+    'AUTH_ID_TOKEN_COOKIE_MAX_AGE'
+];
+
+const isBrowser = typeof window !== 'undefined';
+
+const base = (isBrowser ? window.__ENV__ || (typeof __ENV__ !== 'undefined' && __ENV__) : process.env) || {};
+const env: any = {};
+for (const v of publicEnv) {
+    env[v] = base[v];
+}
+
+// add subscription url for temporary
+export default env;
+
+if (isBrowser) {
+    // process[lowerCase('env')] = env; // to avoid webpack to replace `process` with actual value.
+    // process.APP_ENV = env;
+    const process: any = {};
+    process[lowerCase('env')] = env; // to avoid webpack to replace `process` with actual value.
+    process.APP_ENV = env;
+    window.process = process;
+    window.__CLIENT__ = true;
+    window.__SERVER__ = false;
+} else {
+    global.__CLIENT__ = false;
+    global.__SERVER__ = true;
+    __CLIENT__ = false;
+    __SERVER__ = true;
+}
+try {
+    // global.process = process;
+    logger.info('Process Update Success!');
+} catch (e) {
+    logger.warn(e);
+    logger.info(
+        'Encountered above issue while running "global.process = process", will automatically try again in next render',
+    );
+}

package/lib/generators/add-frontend/templates/tools/mergeConfig.js

@@ -0,0 +1,34 @@
+import fs from 'fs';
+import path from 'path';
+import { setupConfig } from '@common-stack/rollup-vite-utils/lib/utils/setupConfig.js';
+import projectConfig from '../config.json' assert { type: 'json' };
+
+// Function to merge configurations
+const mergeConfigs = setupConfig(projectConfig);
+
+// Ensure the 'app' directory exists
+const appDir = path.resolve('app');
+if (!fs.existsSync(appDir)) {
+  fs.mkdirSync(appDir);
+  console.log(`Created directory: ${appDir}`);
+}
+
+// Write the merged configuration to 'app/finalConfig.json'
+const finalConfigPath = path.resolve(appDir, 'cde-webconfig.json');
+fs.writeFileSync(finalConfigPath, JSON.stringify(mergeConfigs, null, 2));
+console.log(`Merged configuration written to ${finalConfigPath}`);
+
+// Add 'app' to .gitignore if not already present
+const gitignorePath = path.resolve('.gitignore');
+let gitignoreContent = '';
+if (fs.existsSync(gitignorePath)) {
+  gitignoreContent = fs.readFileSync(gitignorePath, 'utf8');
+} else {
+  fs.writeFileSync(gitignorePath, '');
+  console.log('Created .gitignore file');
+}
+
+if (!gitignoreContent.includes('app')) {
+  fs.appendFileSync(gitignorePath, '\napp\n');
+  console.log('Added "app" to .gitignore');
+}