@nlabs/metropolisjs 0.1.2 → 0.2.0

package/examples/translation-types.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2025-Present, Nitrogen Labs, Inc.
+ * Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
+ */
+
+// Define the types directly to avoid JSX compilation issues
+type SimpleTranslations = Record<string, string>;
+
+interface ComplexTranslation {
+  readonly value: string;
+  readonly locale: string;
+  readonly namespace?: string;
+}
+
+type ComplexTranslations = Record<string, ComplexTranslation>;
+
+// Test simple translations type
+const simpleTranslations: SimpleTranslations = {
+  'welcome': 'Welcome to MetropolisJS!',
+  'hello': 'Hello {{name}}!',
+  'goodbye': 'Goodbye'
+};
+
+// Test complex translations type
+const complexTranslations: ComplexTranslations = {
+  'welcome:en': {
+    value: 'Welcome to MetropolisJS!',
+    locale: 'en',
+    namespace: 'common'
+  },
+  'hello:en': {
+    value: 'Hello {{name}}!',
+    locale: 'en',
+    namespace: 'common'
+  },
+  'save:en': {
+    value: 'Save',
+    locale: 'en',
+    namespace: 'buttons'
+  }
+};
+
+// Test individual complex translation type
+const singleTranslation: ComplexTranslation = {
+  value: 'Test translation',
+  locale: 'en',
+  namespace: 'test'
+};
+
+// Function to demonstrate type safety
+function processTranslations(translations: SimpleTranslations | ComplexTranslations): void {
+  if (Object.keys(translations).length === 0) {
+    console.log('No translations provided');
+    return;
+  }
+
+  const firstKey = Object.keys(translations)[0];
+  const firstValue = translations[firstKey];
+
+  if (typeof firstValue === 'string') {
+    // TypeScript knows this is SimpleTranslations
+    console.log('Processing simple translations');
+    Object.entries(translations as SimpleTranslations).forEach(([key, value]) => {
+      console.log(`${key}: ${value}`);
+    });
+  } else if (typeof firstValue === 'object' && firstValue !== null && 'value' in firstValue) {
+    // TypeScript knows this is ComplexTranslations
+    console.log('Processing complex translations');
+    Object.entries(translations as ComplexTranslations).forEach(([key, translation]) => {
+      console.log(`${key}: ${translation.value} (${translation.locale}${translation.namespace ? `, ${translation.namespace}` : ''})`);
+    });
+  }
+}
+
+// Test the function with both types
+console.log('Testing simple translations:');
+processTranslations(simpleTranslations);
+
+console.log('\nTesting complex translations:');
+processTranslations(complexTranslations);
+
+console.log('\nType test completed successfully!');
+
+// Export for use in other files
+export { complexTranslations, processTranslations, simpleTranslations, singleTranslation };
+export type { ComplexTranslation, ComplexTranslations, SimpleTranslations };

package/examples/translation-usage.tsx

@@ -0,0 +1,336 @@
+/**
+ * Copyright (c) 2025-Present, Nitrogen Labs, Inc.
+ * Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
+ */
+
+import React from 'react';
+import { ComplexTranslations, Metropolis, SimpleTranslations } from '../src/index';
+import { i18n } from '../src/utils/i18n';
+
+// Example translations object with simple key-value pairs
+const simpleTranslations: SimpleTranslations = {
+  'welcome': 'Welcome to MetropolisJS!',
+  'hello': 'Hello {{name}}!',
+  'goodbye': 'Goodbye',
+  'loading': 'Loading...',
+  'error': 'An error occurred',
+  'success': 'Operation completed successfully',
+  'cancel': 'Cancel',
+  'save': 'Save',
+  'delete': 'Delete',
+  'edit': 'Edit',
+  'create': 'Create',
+  'update': 'Update',
+  'search': 'Search',
+  'filter': 'Filter',
+  'sort': 'Sort',
+  'refresh': 'Refresh',
+  'back': 'Back',
+  'next': 'Next',
+  'previous': 'Previous',
+  'submit': 'Submit',
+  'reset': 'Reset',
+  'confirm': 'Confirm',
+  'yes': 'Yes',
+  'no': 'No',
+  'ok': 'OK',
+  'close': 'Close',
+  'open': 'Open',
+  'show': 'Show',
+  'hide': 'Hide',
+  'expand': 'Expand',
+  'collapse': 'Collapse',
+  'minimize': 'Minimize',
+  'maximize': 'Maximize',
+  'fullscreen': 'Fullscreen',
+  'settings': 'Settings',
+  'profile': 'Profile',
+  'account': 'Account',
+  'logout': 'Logout',
+  'login': 'Login',
+  'register': 'Register',
+  'forgot_password': 'Forgot Password?',
+  'remember_me': 'Remember Me',
+  'email': 'Email',
+  'password': 'Password',
+  'username': 'Username',
+  'first_name': 'First Name',
+  'last_name': 'Last Name',
+  'phone': 'Phone',
+  'address': 'Address',
+  'city': 'City',
+  'state': 'State',
+  'country': 'Country',
+  'zip_code': 'ZIP Code',
+  'birth_date': 'Birth Date',
+  'gender': 'Gender',
+  'male': 'Male',
+  'female': 'Female',
+  'other': 'Other',
+  'prefer_not_to_say': 'Prefer not to say'
+};
+
+// Example complex translations with locale and namespace support
+const complexTranslations: ComplexTranslations = {
+  'welcome:en': {
+    value: 'Welcome to MetropolisJS!',
+    locale: 'en',
+    namespace: 'common'
+  },
+  'hello:en': {
+    value: 'Hello {{name}}!',
+    locale: 'en',
+    namespace: 'common'
+  },
+  'save:en': {
+    value: 'Save',
+    locale: 'en',
+    namespace: 'buttons'
+  },
+  'cancel:en': {
+    value: 'Cancel',
+    locale: 'en',
+    namespace: 'buttons'
+  },
+  'welcome:es': {
+    value: '¡Bienvenido a MetropolisJS!',
+    locale: 'es',
+    namespace: 'common'
+  },
+  'hello:es': {
+    value: '¡Hola {{name}}!',
+    locale: 'es',
+    namespace: 'common'
+  },
+  'save:es': {
+    value: 'Guardar',
+    locale: 'es',
+    namespace: 'buttons'
+  }
+};
+
+// Example React component using Metropolis with simple translations
+const SimpleTranslationApp: React.FC = () => {
+  return (
+    <Metropolis
+      translations={simpleTranslations}
+      config={{
+        development: {
+          app: {
+            api: {
+              url: 'https://api.example.com'
+            },
+            urls: {
+              websocket: 'wss://ws.example.com'
+            }
+          }
+        }
+      }}
+    >
+      <div>
+        <h1>{i18n('welcome')}</h1>
+        <p>{i18n('hello', {name: 'John'})}</p>
+        <button>{i18n('save')}</button>
+        <button>{i18n('cancel')}</button>
+        <p>{i18n('loading')}</p>
+      </div>
+    </Metropolis>
+  );
+};
+
+// Example React component using Metropolis with complex translations
+const ComplexTranslationApp: React.FC = () => {
+  return (
+    <Metropolis
+      translations={complexTranslations}
+      config={{
+        development: {
+          app: {
+            api: {
+              url: 'https://api.example.com'
+            },
+            urls: {
+              websocket: 'wss://ws.example.com'
+            }
+          }
+        }
+      }}
+    >
+      <div>
+        <h1>{i18n('welcome', {}, 'en', 'common')}</h1>
+        <p>{i18n('hello', {name: 'John'}, 'en', 'common')}</p>
+        <button>{i18n('save', {}, 'en', 'buttons')}</button>
+        <button>{i18n('cancel', {}, 'en', 'buttons')}</button>
+        <p>{i18n('loading')}</p>
+      </div>
+    </Metropolis>
+  );
+};
+
+// Example of using translations in a component
+const UserProfile: React.FC = () => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [user, setUser] = React.useState({name: 'John Doe'});
+
+  return (
+    <div>
+      <h2>{i18n('profile')}</h2>
+      {isLoading ? (
+        <p>{i18n('loading')}</p>
+      ) : (
+        <div>
+          <p>{i18n('hello', {name: user.name})}</p>
+          <button>{i18n('edit')}</button>
+          <button>{i18n('delete')}</button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Example of a form component with translations
+const LoginForm: React.FC = () => {
+  const [formData, setFormData] = React.useState({
+    email: '',
+    password: '',
+    rememberMe: false
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle form submission
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h2>{i18n('login')}</h2>
+
+      <div>
+        <label htmlFor="email">{i18n('email')}:</label>
+        <input
+          id="email"
+          type="email"
+          value={formData.email}
+          onChange={(e) => setFormData({...formData, email: e.target.value})}
+          required
+        />
+      </div>
+
+      <div>
+        <label htmlFor="password">{i18n('password')}:</label>
+        <input
+          id="password"
+          type="password"
+          value={formData.password}
+          onChange={(e) => setFormData({...formData, password: e.target.value})}
+          required
+        />
+      </div>
+
+      <div>
+        <label>
+          <input
+            type="checkbox"
+            checked={formData.rememberMe}
+            onChange={(e) => setFormData({...formData, rememberMe: e.target.checked})}
+          />
+          {i18n('remember_me')}
+        </label>
+      </div>
+
+      <div>
+        <button type="submit">{i18n('login')}</button>
+        <button type="button">{i18n('cancel')}</button>
+      </div>
+
+      <div>
+        <a href="#forgot-password">{i18n('forgot_password')}</a>
+      </div>
+    </form>
+  );
+};
+
+// Example of a multilingual app that can switch between simple and complex translations
+const MultilingualApp: React.FC = () => {
+  const [useComplexTranslations, setUseComplexTranslations] = React.useState(false);
+  const [currentLocale, setCurrentLocale] = React.useState<'en' | 'es'>('en');
+
+  const selectedTranslations = useComplexTranslations ? complexTranslations : simpleTranslations;
+
+  return (
+    <Metropolis
+      translations={selectedTranslations}
+      config={{
+        development: {
+          app: {
+            api: {
+              url: 'https://api.example.com'
+            },
+            urls: {
+              websocket: 'wss://ws.example.com'
+            }
+          }
+        }
+      }}
+    >
+      <div>
+        <div style={{marginBottom: '20px'}}>
+          <label>
+            <input
+              type="checkbox"
+              checked={useComplexTranslations}
+              onChange={(e) => setUseComplexTranslations(e.target.checked)}
+            />
+            Use Complex Translations
+          </label>
+
+          {useComplexTranslations && (
+            <div style={{marginLeft: '20px'}}>
+              <label>
+                Locale:
+                <select value={currentLocale} onChange={(e) => setCurrentLocale(e.target.value as 'en' | 'es')}>
+                  <option value="en">English</option>
+                  <option value="es">Español</option>
+                </select>
+              </label>
+            </div>
+          )}
+        </div>
+
+        <h1>
+          {useComplexTranslations
+            ? i18n('welcome', {}, currentLocale, 'common')
+            : i18n('welcome')
+          }
+        </h1>
+
+        <p>
+          {useComplexTranslations
+            ? i18n('hello', {name: 'World'}, currentLocale, 'common')
+            : i18n('hello', {name: 'World'})
+          }
+        </p>
+
+        <div>
+          <button>
+            {useComplexTranslations
+              ? i18n('save', {}, currentLocale, 'buttons')
+              : i18n('save')
+            }
+          </button>
+          <button>
+            {useComplexTranslations
+              ? i18n('cancel', {}, currentLocale, 'buttons')
+              : i18n('cancel')
+            }
+          </button>
+        </div>
+
+        <UserProfile />
+        <LoginForm />
+      </div>
+    </Metropolis>
+  );
+};
+
+export default MultilingualApp;

package/index.js

@@ -2,4 +2,5 @@
  * Copyright (c) 2018-Present, Nitrogen Labs, Inc.
  * Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
  */
+export { i18n, initI18n, updateI18nResources } from './src/utils/i18n';
 module.exports = require('./lib');

package/jest.config.mjs

@@ -0,0 +1,28 @@
+/**
+ * Jest configuration for MetropolisJS tests.
+ * Pulls the default Lex Jest config (which includes TS/Babel transforms)
+ * and overlays the project-specific settings from lex.config.mjs.
+ */
+import lexConfig from './lex.config.mjs';
+import baseConfig from './node_modules/@nlabs/lex/jest.config.mjs';
+
+const projectJest = lexConfig?.jest || {};
+
+export default {
+  ...baseConfig,
+  ...projectJest,
+  testPathIgnorePatterns: [
+    'lib/__tests__/e2e/helpers/testGraphQLServer.d.ts',
+    'lib/__tests__/e2e/helpers/testGraphQLServerSimple.d.ts'
+  ],
+  transformIgnorePatterns: [
+    '/node_modules/(?!(?:@nlabs/utils|@nlabs/rip-hunter)/)'
+  ],
+  moduleNameMapper: {
+    ...baseConfig.moduleNameMapper,
+    ...projectJest.moduleNameMapper
+  },
+  transform: {
+    ...baseConfig.transform
+  }
+};

package/lex.config.mjs

@@ -1,4 +1,6 @@
-export default {
+import {Config} from '@nlabs/lex';
+
+export default Config.create({
   ai: {
     maxTokens: 4000,
     model: 'cursor-code',
@@ -6,12 +8,19 @@ export default {
     temperature: 0.1
   },
   entryJS: 'app.tsx',
+  esbuild: {
+    minify: process.env.NODE_ENV === 'production'
+  },
   gitUrl: 'https://github.com/nitrogenlabs/metropolisjs',
   jest: {
+    extensionsToTreatAsEsm: ['.ts', '.tsx'],
+    moduleNameMapper: {
+      '^@nlabs/(.*)$': '<rootDir>/node_modules/@nlabs/$1'
+    },
     testEnvironment: 'jsdom'
   },
   outputPath: 'lib',
   targetEnvironment: 'web',
   useESM: true,
   useTypescript: true
-};
+});

package/lib/__tests__/e2e/helpers/testGraphQLServer.d.ts

@@ -0,0 +1,22 @@
+export declare const MOCK_USER: {
+    userId: string;
+    username: string;
+    email: string;
+    password: string;
+};
+export declare const MOCK_SESSION: {
+    token: string;
+    expires: number;
+    issued: number;
+    userId: string;
+    username: string;
+};
+/**
+ * Start test GraphQL server
+ */
+export declare const startTestServer: (port?: number) => Promise<unknown>;
+/**
+ * Stop test server
+ */
+export declare const stopTestServer: (server: any) => Promise<unknown>;
+//# sourceMappingURL=testGraphQLServer.d.ts.map

package/lib/__tests__/e2e/helpers/testGraphQLServer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testGraphQLServer.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/e2e/helpers/testGraphQLServer.ts"],"names":[],"mappings":"AA8CA,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;CAMxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAU,aAAW,qBA6HhD,CAAC;AAUF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,WAAM,qBAIpC,CAAC"}