@common-stack/generate-plugin 8.1.1-alpha.0 → 8.1.1-alpha.10

package/src/generators/add-frontend/frameworks/tailwindui/src/root.tsx.template

@@ -1,27 +1,38 @@
 import 'reflect-metadata';
 import * as React from 'react';
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, useRouteLoaderData, useRouteError, json } from '@remix-run/react';
-import type { LinksFunction } from "@remix-run/node";
+import {
+    Links,
+    Meta,
+    Outlet,
+    Scripts,
+    ScrollRestoration,
+    useLoaderData,
+    useRouteError,
+    useRouteLoaderData,
+    data,
+} from '@remix-run/react';
 // @ts-ignore
 import publicEnv from '@src/config/public-config';
 import { PluginArea } from '@common-stack/client-react';
 import { subscribeReduxRouter } from '@common-stack/remix-router-redux';
+import { ApplicationErrorHandler, RemixErrorBoundary as ErrorBoundary } from '@admin-layout/tailwind-ui';
 // @ts-ignore
 import clientModules, { plugins } from '@app/frontend-stack-react/modules.js';
 // @ts-ignore
 import { useChangeLanguage } from 'remix-i18next/react';
 import { useTranslation } from 'react-i18next';
+// @ts-ignore
+import { i18nextInstance as i18next } from '@app/frontend-stack-react/i18n-localization/i18next.server.js';
 import { LayoutCookieProvider } from '@admin-layout/client';
 import { settingsLoaderUtil } from '@admin-layout/client/lib/components/UpdateSettings/UpdateSettings.server';
-import { IAppLoadContext, IResourceParams } from '@common-stack/client-core';
+import type { IAppLoadContext } from '@common-stack/client-core';
+import type { IResourceParams } from '@common-stack/core';
 import { FillRenderProvider, PluginsLoader } from '@common-stack/components-pro';
-// @ts-ignore
-import { i18nextInstance as i18next } from '@app/frontend-stack-react/i18n-localization/i18next.server.js';
-import stylesheet from "./tailwind.css?url";
 
-export const links: LinksFunction = () => [
-    { rel: "stylesheet", href: stylesheet },
-];
+// eslint-disable-next-line import/no-unresolved
+import styles from '../tailwind.css?url';
+
+export const links = () => [{ rel: 'stylesheet', href: styles }];
 
 export const loader = async ({
     request,
@@ -32,37 +43,49 @@ export const loader = async ({
     context: IAppLoadContext;
     params: IResourceParams;
 }) => {
-    const locale = await i18next.getLocale(request);
-    const settingsResponse = await settingsLoaderUtil({ request });
-    const loadedPlugins = await PluginsLoader(plugins, { request, context, params });
+    // Fetch settings with error handling - don't let settings failures break the app
+    let settingsResponse: any = {};
+    try {
+        settingsResponse =
+            (await settingsLoaderUtil({
+                request,
+                context,
+                params,
+            })) || {};
+    } catch (error) {
+        console.error('❌ Failed to load settings, using defaults:', error);
+        // Continue without settings - the app should still work
+    }
 
-    return json(
+    const [locale] = await Promise.all([i18next.getLocale(request)]);
+    const loadedPlugins = await PluginsLoader(plugins, { request, context, params });
+    return data(
         {
             __ENV__: publicEnv,
             locale,
-            settings: settingsResponse?.settings,
+            settings: settingsResponse?.settings || {},
             loadedPlugins,
         },
         {
             headers: [
                 ['Cache-Control', 'max-age=300, s-maxage=600'],
-                ['Set-Cookie', settingsResponse?.setCookie],
-            ],
+                settingsResponse?.setCookie ? ['Set-Cookie', settingsResponse.setCookie] : null,
+            ].filter(Boolean) as [string, string][],
         },
     );
 };
 
 export const handle = {
-    i18n: 'common',
+    i18n: ['common', 'translations', 'projects'],
 };
 
-export function shouldRevalidate(params: any) {
-    return params.defaultShouldRevalidate && params.currentUrl.pathname !== params.nextUrl.pathname;
-}
+export const shouldRevalidate = () => false;
 
 export function Layout({ children }: { children: React.ReactNode }) {
-    const data = useRouteLoaderData<{ locale: any }>('root');
-    const locale = data?.locale;
+    // useLoaderData is for happy paths with Error boundary it will fail
+    // https://github.com/remix-run/remix/issues/8951#issuecomment-1973321870
+    const loaderData = useRouteLoaderData<{ locale: any; __ENV__?: any }>('root');
+    const locale = loaderData?.locale || 'en';
 
     const { i18n } = useTranslation();
 
@@ -78,7 +101,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
                 <>
                     <script
                         dangerouslySetInnerHTML={{
-                            __html: `window.__ENV__ = ${JSON.stringify((data as any)?.__ENV__)}`,
+                            __html: `window.__ENV__ = ${JSON.stringify((loaderData as any)?.__ENV__ || {})}`,
                         }}
                     />
                     <script
@@ -106,15 +129,28 @@ export function Layout({ children }: { children: React.ReactNode }) {
             <head>
                 <meta charSet="utf-8" />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
+                {/* CRITICAL: Load Symbol.observable polyfill BEFORE any other scripts */}
+                <script
+                    dangerouslySetInnerHTML={{
+                        __html: `
+                            (function() {
+                                if (typeof Symbol !== 'undefined' && typeof Symbol.for === 'function') {
+                                    if (!Symbol.observable) {
+                                        Symbol.observable = Symbol.for('observable');
+                                    }
+                                    console.log('[Symbol.observable polyfill] Loaded in head:', Symbol.observable);
+                                }
+                            })();
+                        `,
+                    }}
+                />
                 <Meta />
                 <Links />
                 {typeof window === 'undefined' ? `[__STYLESHEET__]` : ''}
             </head>
             <body>
                 <PluginArea />
-                <FillRenderProvider>
-                    {clientModules.getWrappedRoot(children)}
-                </FillRenderProvider>
+                <FillRenderProvider>{clientModules.getWrappedRoot(children)}</FillRenderProvider>
                 <ScrollRestoration />
                 <Scripts />
                 {getConstants()}
@@ -123,24 +159,14 @@ export function Layout({ children }: { children: React.ReactNode }) {
     );
 }
 
-const TestComponent = () => {
-    return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-100">
-            <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
-                <h1 className="text-2xl font-bold text-center">Hello, Tailwind CSS!</h1>
-                <p className="text-gray-500 text-center">This is a test page using React and Tailwind CSS.</p>
-            </div>
-        </div>
-    );
-}
-
 export default function App() {
     return (
-        <LayoutCookieProvider>
-            {/* <Outlet /> */}
-            <TestComponent />
-        </LayoutCookieProvider>
+        <ApplicationErrorHandler plugins={plugins}>
+            <LayoutCookieProvider>
+                <Outlet />
+            </LayoutCookieProvider>
+        </ApplicationErrorHandler>
     );
 }
 
-// export { ErrorBoundary };
+export { ErrorBoundary };

package/src/generators/add-frontend/frameworks/tailwindui/tailwind.config.ts.template

@@ -1,12 +1,291 @@
-import type { Config } from 'tailwindcss'
+/** @type {import('tailwindcss').Config} */
+
+import path from 'node:path';
 
 export default {
-  content: [
-    "./src/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config
+    darkMode: ['class'],
+    variants: {
+        typography: ['dark'],
+    },
+    content: [
+        './src/**/*.{ts,tsx}',
+        './src/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}',
+        './app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}',
+        './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
+    ],
+    important: true,
+    theme: {
+        container: {
+            center: true,
+            padding: '2rem',
+            screens: {
+                '2xl': '1400px',
+            },
+        },
+        extend: {
+            colors: {
+                // light mode
+                tremor: {
+                    brand: {
+                        faint: '#eff6ff', // blue-50
+                        muted: '#bfdbfe', // blue-200
+                        subtle: '#60a5fa', // blue-400
+                        DEFAULT: '#3b82f6', // blue-500
+                        emphasis: '#1d4ed8', // blue-700
+                        inverted: '#ffffff', // white
+                    },
+                    background: {
+                        muted: '#f9fafb', // gray-50
+                        subtle: '#f3f4f6', // gray-100
+                        DEFAULT: '#ffffff', // white
+                        emphasis: '#374151', // gray-700
+                    },
+                    border: {
+                        DEFAULT: '#e5e7eb', // gray-200
+                    },
+                    ring: {
+                        DEFAULT: '#e5e7eb', // gray-200
+                    },
+                    content: {
+                        subtle: '#9ca3af', // gray-400
+                        DEFAULT: '#6b7280', // gray-500
+                        emphasis: '#374151', // gray-700
+                        strong: '#111827', // gray-900
+                        inverted: '#ffffff', // white
+                    },
+                },
+                // dark mode
+                'dark-tremor': {
+                    brand: {
+                        faint: '#0B1229', // custom
+                        muted: '#172554', // blue-950
+                        subtle: '#1e40af', // blue-800
+                        DEFAULT: '#3b82f6', // blue-500
+                        emphasis: '#60a5fa', // blue-400
+                        inverted: '#030712', // gray-950
+                    },
+                    background: {
+                        muted: '#131A2B', // custom
+                        subtle: '#1f2937', // gray-800
+                        DEFAULT: '#111827', // gray-900
+                        emphasis: '#d1d5db', // gray-300
+                    },
+                    border: {
+                        DEFAULT: '#1f2937', // gray-800
+                    },
+                    ring: {
+                        DEFAULT: '#1f2937', // gray-800
+                    },
+                    content: {
+                        subtle: '#4b5563', // gray-600
+                        DEFAULT: '#6b7280', // gray-600
+                        emphasis: '#e5e7eb', // gray-200
+                        strong: '#f9fafb', // gray-50
+                        inverted: '#000000', // black
+                    },
+                },
+
+                border: 'hsl(var(--border))',
+                input: 'hsl(var(--input))',
+                ring: 'hsl(var(--ring))',
+                background: 'hsl(var(--background))',
+                foreground: 'hsl(var(--foreground))',
+                primary: {
+                    DEFAULT: 'hsl(var(--primary))',
+                    foreground: 'hsl(var(--primary-foreground))',
+                },
+                secondary: {
+                    DEFAULT: 'hsl(var(--secondary))',
+                    foreground: 'hsl(var(--secondary-foreground))',
+                },
+                destructive: {
+                    DEFAULT: 'hsl(var(--destructive))',
+                    foreground: 'hsl(var(--destructive-foreground))',
+                },
+                muted: {
+                    DEFAULT: 'hsl(var(--muted))',
+                    foreground: 'hsl(var(--muted-foreground))',
+                },
+                accent: {
+                    DEFAULT: 'hsl(var(--accent))',
+                    foreground: 'hsl(var(--accent-foreground))',
+                },
+                popover: {
+                    DEFAULT: 'hsl(var(--popover))',
+                    foreground: 'hsl(var(--popover-foreground))',
+                },
+                card: {
+                    DEFAULT: 'hsl(var(--card))',
+                    foreground: 'hsl(var(--card-foreground))',
+                },
+            },
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+                'tremor-small': '0.375rem',
+                'tremor-default': '0.5rem',
+                'tremor-full': '9999px',
+            },
+            keyframes: {
+                'accordion-down': {
+                    from: { height: 0 },
+                    to: { height: 'var(--radix-accordion-content-height)' },
+                },
+                'accordion-up': {
+                    from: { height: 'var(--radix-accordion-content-height)' },
+                    to: { height: 0 },
+                },
+                grid: {
+                    '0%': { transform: 'translateY(-50%)' },
+                    '100%': { transform: 'translateY(0)' },
+                },
+                marquee: {
+                    from: { transform: 'translateX(0)' },
+                    to: { transform: 'translateX(calc(-100% - var(--gap)))' },
+                },
+                'marquee-vertical': {
+                    from: { transform: 'translateY(0)' },
+                    to: { transform: 'translateY(calc(-100% - var(--gap)))' },
+                },
+                shimmer: {
+                    from: {
+                        backgroundPosition: '0 0',
+                    },
+                    to: {
+                        backgroundPosition: '-200% 0',
+                    },
+                },
+                'spin-around': {
+                    '0%': {
+                        transform: 'translateZ(0) rotate(0)',
+                    },
+                    '15%, 35%': {
+                        transform: 'translateZ(0) rotate(90deg)',
+                    },
+                    '65%, 85%': {
+                        transform: 'translateZ(0) rotate(270deg)',
+                    },
+                    '100%': {
+                        transform: 'translateZ(0) rotate(360deg)',
+                    },
+                },
+                slide: {
+                    to: {
+                        transform: 'translate(calc(100cqw - 100%), 0)',
+                    },
+                },
+            },
+            animation: {
+                'accordion-down': 'accordion-down 0.2s ease-out',
+                'accordion-up': 'accordion-up 0.2s ease-out',
+                grid: 'grid 15s linear infinite',
+                marquee: 'marquee var(--duration) linear infinite',
+                'marquee-vertical': 'marquee-vertical var(--duration) linear infinite',
+                shimmer: 'shimmer 2s linear infinite',
+                'spin-around': 'spin-around calc(var(--speed) * 2) infinite linear',
+                slide: 'slide var(--speed) ease-in-out infinite alternate',
+            },
+            boxShadow: {
+                // light
+                'tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+                'tremor-card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+                'tremor-dropdown': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+                // dark
+                'dark-tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+                'dark-tremor-card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+                'dark-tremor-dropdown': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+                // custom shadows
+                glass: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
+                light: 'rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px',
+                dark: 'rgba(205, 205, 162, 0.25) 0px 6px 12px -2px, rgba(255,255,255, 0.3) 0px 3px 7px -3px',
+            },
+            fontSize: {
+                'tremor-label': ['0.75rem'],
+                'tremor-default': ['0.875rem', { lineHeight: '1.25rem' }],
+                'tremor-title': ['1.125rem', { lineHeight: '1.75rem' }],
+                'tremor-metric': ['1.875rem', { lineHeight: '2.25rem' }],
+            },
+            backgroundImage: {
+                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+            },
+            backdropBlur: {
+                glass: '4px',
+            },
+        },
+    },
+    safelist: [
+        {
+            pattern:
+                /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+            variants: ['hover', 'ui-selected'],
+        },
+        {
+            pattern:
+                /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+            variants: ['hover', 'ui-selected'],
+        },
+        {
+            pattern:
+                /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+            variants: ['hover', 'ui-selected'],
+        },
+        {
+            pattern:
+                /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+        },
+        {
+            pattern:
+                /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+        },
+        {
+            pattern:
+                /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+        },
+        // Additional utility classes
+        'w-full',
+        'max-w-4xl',
+        'mx-auto',
+        'px-4',
+        'animate-fade-in-up-delay-3',
+        'animate-fade-in-up-delay-4',
+        'bg-white/10',
+        'backdrop-blur-lg',
+        'rounded-2xl',
+        'p-8',
+        'text-center',
+        'border',
+        'border-white/20',
+        'text-white',
+        'text-2xl',
+        'font-semibold',
+        'mb-4',
+        'text-gray-300',
+        'mb-6',
+        'bg-white',
+        'text-[#1C2536]',
+        'px-8',
+        'py-3',
+        'rounded-full',
+        'hover:bg-gray-100',
+        'transition-all',
+        'duration-300',
+        'transform',
+        'hover:scale-105',
+        'hover:shadow-lg',
+        'inline-flex',
+        'items-center',
+        'gap-2',
+        'group',
+        'group-hover:translate-x-1',
+        'transition-transform',
+        '!h-[calc(100vh_-_150px)]',
+    ],
+    plugins: [
+        require('tailwindcss-animate'),
+        require('@tailwindcss/forms'),
+        require('@tailwindcss/aspect-ratio'),
+        require('@tailwindcss/typography'),
+    ],
+};
 

package/src/generators/add-frontend/templates/package.json

@@ -17,7 +17,7 @@
     "main": "index.js",
     "scripts": {
         "prebuild": "yarn build:clean && yarn genconfig",
-        "build": "cross-env SSR=true NODE_OPTIONS='--max_old_space_size=4096' NODE_ENV=production remix vite:build",
+        "build": "cross-env SSR=true NODE_OPTIONS='--max_old_space_size=6096' NODE_ENV=production remix vite:build",
         "build:SSR": "cross-env SSR=true NODE_ENV=production remix vite:build",
         "build:clean": "rimraf dist build node_modules/.vite",
         "build:debug": "cross-env DEBUGGING=true NODE_ENV=production remix vite:build",
@@ -56,16 +56,12 @@
         "common": "link:./common"
     },
     "dependencies": {
-        "@common-stack/frontend-stack-react": "6.0.8-alpha.0",
+        "@common-stack/frontend-stack-react": "8.1.1-alpha.4",
         "@react-icons/all-files": "^4.1.0",
         "classnames": "^2.2.6",
-        "compression": "^1.7.4",
         "glob-all": "^3.3.1",
         "immutability-helper": "^3.0.1",
         "is-plain-obj": "^3.0.0",
-        "isomorphic-fetch": "^2.2.1",
-        "lodash": "^4.17.15",
-        "lodash-es": "^4.17.21",
         "moment": "2.29.1",
         "ramda": "^0.30.1",
         "react-ga4": "^2.1.0",
@@ -81,7 +77,7 @@
     },
     "devDependencies": {
         "@cdmbase/vite-plugin-i18next-loader": "^2.0.12",
-        "@common-stack/rollup-vite-utils": "6.0.8-alpha.0",
+        "@common-stack/rollup-vite-utils": "8.1.1-alpha.9",
         "@remix-run/dev": "~2.15.3",
         "@remix-run/serve": "~2.15.3",
         "cross-env": "^7.0.3",

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

@@ -1,14 +1,9 @@
 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();
+import { performCopyOperations } from '@common-stack/rollup-vite-utils/lib/preStartup/configLoader/configLoader.js';
+import config from './app/cde-webconfig.json' with { type: 'json' };
 
 Object.keys(config.buildConfig).forEach((key) => {
     global[key] = config.buildConfig[key];
@@ -17,9 +12,15 @@ Object.keys(config.buildConfig).forEach((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 { 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'

package/src/generators/add-frontend/templates/src/routes.ts.template

@@ -0,0 +1,38 @@
+// import { flatRoutes } from "@remix-run/fs-routes";
+import { type RouteConfig } from '@remix-run/route-config';
+import { remixRoutesOptionAdapter } from '@remix-run/routes-option-adapter';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { defineRoutesConfig } from '@common-stack/rollup-vite-utils/lib/vite-wrappers/json-wrappers.js';
+import { performCopyOperations } from '@common-stack/rollup-vite-utils/lib/preStartup/configLoader/configLoader.js';
+import config from '../app/cde-webconfig.json' with { type: 'json' };
+
+const directoryName = dirname(fileURLToPath(import.meta.url));
+
+export default remixRoutesOptionAdapter(async (defineRoutes) => {
+    if (process.env.NODE_ENV === 'production') {
+        await performCopyOperations(config);
+    }
+    let metaJson = null;
+    try {
+        metaJson = await import('../app/sync-meta.json');
+    } catch {
+        console.warn('No sync-meta.json found, continuing without metadata.');
+    }
+    return defineRoutes((routeFn) => {
+        defineRoutesConfig(
+            routeFn,
+            {
+                routesFileName: 'routes.json',
+                packages: config.modules,
+                paths: config.paths,
+                iconsRepository: config?.iconsRepository,
+                rootPath: resolve(directoryName, '../../..'),
+                settings: {
+                    _useFutureCommonPackage: true,
+                },
+            },
+            metaJson,
+        );
+    });
+}) satisfies RouteConfig;