@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.48 → 2.0.0-next.49

package/fix-imports.mjs

@@ -0,0 +1,185 @@
+import fs from 'fs';
+import path from 'path';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const isDryRun = args.includes('--dry-run') || args.includes('-d');
+const isVerbose = args.includes('--verbose') || args.includes('-v');
+
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(`
+Usage: node fix-imports.mjs [options]
+
+Options:
+  --dry-run, -d    Show what would be changed without making changes
+  --verbose, -v    Show detailed output
+  --help, -h       Show this help message
+
+Examples:
+  node fix-imports.mjs                # Fix all imports
+  node fix-imports.mjs --dry-run      # Check imports without changing files
+  node fix-imports.mjs -d -v          # Dry run with verbose output
+`);
+  process.exit(0);
+}
+
+// Function to recursively find all .ts files
+function findTsFiles(dir, files = []) {
+  const items = fs.readdirSync(dir);
+
+  for (const item of items) {
+    const fullPath = path.join(dir, item);
+    const stat = fs.statSync(fullPath);
+
+    if (
+      stat.isDirectory() &&
+      !item.startsWith('.') &&
+      item !== 'node_modules' &&
+      item !== 'dist'
+    ) {
+      findTsFiles(fullPath, files);
+    } else if (item.endsWith('.ts') && !item.endsWith('.d.ts')) {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+// Function to check/fix imports in a file
+function processImportsInFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  let modified = false;
+  const changes = [];
+
+  // Fix relative imports with 'from' that don't have extensions
+  let fixedContent = content.replace(
+    /import\s+([^'"]*)\s+from\s+['"](\.[^'"]*?)(?<!\.ts|\.js|\.css|\.json|\.vue|\.mjs)['"];?/g,
+    (match, importPart, importPath, offset) => {
+      // Skip CSS imports with ?inline
+      if (importPath.includes('.css?inline')) {
+        return match;
+      }
+
+      // Check if the imported file exists with .ts extension (source file)
+      const resolvedPath = path.resolve(
+        path.dirname(filePath),
+        importPath + '.ts'
+      );
+      if (fs.existsSync(resolvedPath)) {
+        const lineNumber = content.substring(0, offset).split('\n').length;
+        const newImport = `import ${importPart} from '${importPath}.js';`;
+        changes.push({
+          line: lineNumber,
+          old: match,
+          new: newImport,
+          type: 'import-from',
+        });
+        modified = true;
+        return newImport;
+      }
+
+      return match;
+    }
+  );
+
+  // Fix side-effect imports without 'from' that don't have extensions
+  fixedContent = fixedContent.replace(
+    /import\s+['"](\.[^'"]*?)(?<!\.ts|\.js|\.css|\.json|\.vue|\.mjs)['"];?/g,
+    (match, importPath, offset) => {
+      // Skip CSS imports with ?inline
+      if (importPath.includes('.css?inline')) {
+        return match;
+      }
+
+      // Check if the imported file exists with .ts extension (source file)
+      const resolvedPath = path.resolve(
+        path.dirname(filePath),
+        importPath + '.ts'
+      );
+      if (fs.existsSync(resolvedPath)) {
+        const lineNumber = content.substring(0, offset).split('\n').length;
+        const newImport = `import '${importPath}.js';`;
+        changes.push({
+          line: lineNumber,
+          old: match,
+          new: newImport,
+          type: 'import-side-effect',
+        });
+        modified = true;
+        return newImport;
+      }
+
+      return match;
+    }
+  );
+
+  const relativePath = path.relative(__dirname, filePath);
+
+  if (modified) {
+    if (isDryRun) {
+      console.log(`❌ ${relativePath} - would be modified`);
+      if (isVerbose) {
+        changes.forEach((change) => {
+          console.log(`  Line ${change.line}: ${change.old} → ${change.new}`);
+        });
+      }
+    } else {
+      fs.writeFileSync(filePath, fixedContent, 'utf8');
+      console.log(`✅ Fixed imports in: ${relativePath}`);
+      if (isVerbose) {
+        changes.forEach((change) => {
+          console.log(`  Line ${change.line}: ${change.old} → ${change.new}`);
+        });
+      }
+    }
+  } else if (isVerbose) {
+    console.log(`✅ ${relativePath} - no changes needed`);
+  }
+
+  return {modified, changes: changes.length};
+}
+
+// Main execution
+const srcDir = path.join(__dirname, 'src');
+const tsFiles = findTsFiles(srcDir);
+
+console.log(`Found ${tsFiles.length} TypeScript files`);
+if (isDryRun) {
+  console.log('🔍 Running in dry-run mode - no files will be modified\n');
+}
+
+let totalFilesModified = 0;
+let totalChanges = 0;
+
+for (const file of tsFiles) {
+  const result = processImportsInFile(file);
+  if (result.modified) {
+    totalFilesModified++;
+  }
+  totalChanges += result.changes;
+}
+
+console.log('\n📊 Summary:');
+console.log(`Files processed: ${tsFiles.length}`);
+console.log(
+  `Files ${isDryRun ? 'that would be modified' : 'modified'}: ${totalFilesModified}`
+);
+console.log(`Total changes ${isDryRun ? 'needed' : 'made'}: ${totalChanges}`);
+
+if (isDryRun && totalFilesModified > 0) {
+  console.log(
+    '\n❌ Some files need import fixes. Run without --dry-run to fix them.'
+  );
+  process.exit(1);
+} else if (isDryRun) {
+  console.log('\n✅ All imports have correct file extensions!');
+} else if (totalFilesModified > 0) {
+  console.log('\n✅ All imports have been fixed!');
+} else {
+  console.log('\n✅ All imports already had correct file extensions!');
+}

package/fix-js-extensions.mjs

@@ -0,0 +1,44 @@
+import fs from 'fs';
+import path from 'path';
+
+const SRC_DIR = path.resolve('src');
+const IMPORT_REGEX = /import(.+?)['"](\.*\/[^'";?]+)['"]/g; // Skip filenames with ?
+
+function checkAndFixFile(filePath) {
+    let content = fs.readFileSync(filePath, 'utf8');
+    let hasFixes = false;
+
+    content = content.replace(IMPORT_REGEX, (fullMatch, middelPart, importPath) => {
+        if (!importPath.endsWith('.js')) {
+            hasFixes = true;
+            return `import${middelPart}'${importPath}.js'`;
+        }
+        return fullMatch;
+    });
+
+    if (hasFixes) {
+        fs.writeFileSync(filePath, content, 'utf8');
+        console.log(`🔧 Fixed imports in: ${filePath}`);
+    }
+}
+
+function getAllTsFiles(dir) {
+    let files = [];
+    for (const file of fs.readdirSync(dir)) {
+        const fullPath = path.join(dir, file);
+        if (fs.statSync(fullPath).isDirectory()) {
+            files = files.concat(getAllTsFiles(fullPath));
+        } else if (file.endsWith('.ts')) {
+            files.push(fullPath);
+        }
+    }
+    return files;
+}
+
+function main() {
+    const tsFiles = getAllTsFiles(SRC_DIR);
+    tsFiles.forEach(file => checkAndFixFile(file));
+    console.log('✅ All imports are now correctly formatted.');
+}
+
+main();

package/lit-localize.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+  "sourceLocale": "en",
+  "targetLocales": ["es-419", "fi-FI"],
+  "tsConfig": "./tsconfig.json",
+  "output": {
+    "mode": "runtime",
+    "outputDir": "./src/generated/locales",
+    "localeCodesModule": "./src/generated/locale-codes.ts"
+  },
+  "interchange": {
+    "format": "xliff",
+    "xliffDir": "./xliff/"
+  }
+}

package/new-component.ts

@@ -0,0 +1,148 @@
+import fs from 'fs';
+import path from 'path';
+
+import {question, select, multiselect} from '@topcli/prompts';
+
+const name = await question(
+  'Component name (without obc prefix, and UpperCamelCase) ?',
+  {
+    validators: [
+      {
+        validate: (value) => /^[A-Z][a-zA-Z0-9]+$/.test(value),
+        message: 'Component name must be UpperCamelCase',
+      },
+      {
+        message: 'Component name is required',
+        validate: (value) => !!value,
+      },
+    ],
+  }
+);
+const componentType = await select('Type of component', {
+  choices: [
+    'ui (input, label, tables)',
+    'instrument (compass, azimuth)',
+    'indicator (bearing, speed, rot)',
+    'page',
+    'ar',
+    'automation',
+    'integration system',
+    'building-block',
+    'bars-graphs (line, area, donut, pie)',
+  ],
+});
+const files = await multiselect('Create files', {
+  choices: ['css', 'storybook'],
+  preSelectedChoices: ['css', 'storybook'],
+});
+
+// Convert name to kebab-case
+const componentName = name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+let parentDir: string;
+if (componentType === 'ui (input, label, tables)') {
+  parentDir = 'components';
+} else if (componentType === 'indicator (bearing, speed, rot)') {
+  parentDir = 'navigation-instruments';
+} else if (componentType === 'instrument (compass, azimuth)') {
+  parentDir = 'navigation-instruments';
+} else if (componentType === 'ar') {
+  parentDir = 'ar';
+} else if (componentType === 'automation') {
+  parentDir = 'automation';
+} else if (componentType === 'page') {
+  parentDir = 'pages';
+} else if (componentType === 'building-block') {
+  parentDir = 'building-blocks';
+} else if (componentType === 'integration system') {
+  parentDir = 'integration-systems';
+} else if (componentType === 'bars-graphs (line, area, donut, pie)') {
+  parentDir = 'bars-graphs';
+} else {
+  throw new Error('Invalid component type');
+}
+const dir = path.join('src', parentDir, componentName);
+// Create directory
+fs.mkdirSync(dir, {recursive: true});
+
+// Create files
+// Create lit file
+const hasCss = files.includes('css');
+const litFile = path.join(dir, `${componentName}.ts`);
+const content = `import {LitElement, html${hasCss ? `, unsafeCSS` : ``}} from 'lit';
+import {customElement} from '../../decorator.js';
+${hasCss ? `import componentStyle from './${componentName}.css?inline';` : ''}
+
+@customElement('obc-${componentName}')
+export class Obc${name} extends LitElement {
+
+  override render() {
+    return html\`
+      <div class="wrapper">
+      </div>
+    \`;
+  }
+
+${hasCss ? `  static override styles = unsafeCSS(componentStyle);` : ''}
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-${componentName}': Obc${name};
+  }
+}
+`;
+fs.writeFileSync(litFile, content);
+
+// Create css file
+if (files.includes('css')) {
+  const cssFile = path.join(dir, `${componentName}.css`);
+  const content = ``;
+  fs.writeFileSync(cssFile, content);
+}
+
+// Create storybook file
+if (files.includes('storybook')) {
+  let storybookGroup = '';
+  if (componentType === 'ar') {
+    storybookGroup = 'AR';
+  } else if (componentType === 'automation') {
+    storybookGroup = 'Automation';
+  } else if (componentType === 'building-block') {
+    storybookGroup = 'Building Blocks';
+  } else if (componentType === 'page') {
+    storybookGroup = 'Pages';
+  } else if (componentType === 'integration system') {
+    storybookGroup = 'Integration Systems';
+  } else if (componentType === 'indicator (bearing, speed, rot)') {
+    storybookGroup = 'Indicators';
+  } else if (componentType === 'instrument (compass, azimuth)') {
+    storybookGroup = 'Instruments';
+  } else if (componentType === 'bars-graphs (line, area, donut, pie)') {
+    storybookGroup = 'Bars and Graphs';
+  } else {
+    storybookGroup = await question('Storybook group ');
+  }
+  const storybookTitle = await question('Storybook title ');
+  const storybookFile = path.join(dir, `${componentName}.stories.ts`);
+  const content = `import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {Obc${name}} from './${componentName}.js';
+import './${componentName}.js';
+
+const meta: Meta<typeof Obc${name}> = {
+  title: '${storybookGroup}/${storybookTitle}',
+  tags: ['autodocs', '6.0'],
+  component: 'obc-${componentName}',
+  args: {
+  },
+} satisfies Meta<Obc${name}>;
+
+export default meta;
+type Story = StoryObj<Obc${name}>;
+
+export const Primary: Story = {
+  args: {
+  },
+};`;
+  fs.writeFileSync(storybookFile, content);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.48",
+  "version": "2.0.0-next.49",
   "type": "module",
   "repository": {
     "type": "git",
@@ -93,10 +93,22 @@
     "!dist/companylogo-day.png",
     "bundle/openbridge-webcomponents.bundle.js",
     "bundle/openbridge-webcomponents.bundle.js.map",
+    ".storybook",
+    "script",
+    "xliff",
+    "src",
+    "docs",
     "custom-elements.json",
     "tsconfig.json",
-    "src",
-    "docs"
+    "eslint.config.mjs",
+    "vite.config.ts",
+    "postcss.config.mjs",
+    "lit-localize.json",
+    "new-component.ts",
+    "fix-imports.mjs",
+    "fix-js-extensions.mjs",
+    "vitest.browser.config.ts",
+    "vitest.config.ts"
   ],
   "publishConfig": {
     "access": "public"
@@ -104,5 +116,45 @@
   "customElements": "custom-elements.json",
   "overrides": {
     "storybook": "$storybook"
+  },
+  "scripts": {
+    "👷_BUILD_____________________________________________________": "echo _____",
+    "build": "npm run build:translations && npm run build:ts",
+    "build:ts": "vite build",
+    "build:ts:watch": "vite build --watch",
+    "build:bundle": "tsx ./script/generate-bundle-entry.ts && vite build --mode bundle",
+    "build:translations": "lit localize build",
+    "prepack": "npm run build && npm run build:bundle && npm run analyze",
+    "📚_STORYBOOK_________________________________________________": "echo _____",
+    "storybook": "npm run analyze && storybook dev -p 6006 --no-open",
+    "test-storybook": "vitest --project=storybook",
+    "test-storybook:watch": "vitest --project=storybook --watch",
+    "update-snapshots": "rm -rf __vis__/linux/__baselines__ && mv __vis__/linux/__results__/ __vis__/linux/__baselines__/",
+    "build-storybook": "storybook build",
+    "storybook:server": "http-server -p 6006 storybook-static",
+    "preview": "vite preview",
+    "prebuild-storybook": "npm run build:translations",
+    "🧩_COMPONENT_________________________________________________": "echo _____",
+    "new:component": "tsx ./new-component.ts",
+    "🧪_CHECKS____________________________________________________": "echo _____",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier \"**/*.{cjs,html,js,json,md,ts,css}\"  --write",
+    "format:check": "prettier \"**/*.{cjs,html,js,json,md,ts,css}\"  --check",
+    "lint": "npm run lint:mixins && npm run lint:variables && npm run lint:lit-analyzer && npm run lint:eslint",
+    "lint:mixins": "tsx ./script/check-css-mixins.ts",
+    "lint:variables": "tsx ./script/check-css-variables.ts",
+    "lint:eslint": "eslint 'src/**/*.ts'",
+    "lint:lit-analyzer": "lit-analyzer --strict --maxWarnings 0",
+    "fix-imports": "node fix-imports.mjs",
+    "fix-imports:check": "node fix-imports.mjs --dry-run",
+    "test:browser": "vitest --config=vitest.browser.config.ts",
+    "📦_WRAPPERS__________________________________________________": "echo _____",
+    "📜_SCRIPTS___________________________________________________": "echo _____",
+    "download:icons": "tsx ./script/download-icons.ts",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" && tsx ./script/sort-custom-element-manifest.ts",
+    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --watch",
+    "clean": "rm -rf node_modules dist bundle custom-elements.json",
+    "言_TRANSLATIONS______________________________________________": "echo _____",
+    "translations:extract": "lit localize extract"
   }
 }

package/postcss.config.mjs

@@ -0,0 +1,195 @@
+import path from 'path';
+import postcssMixins from 'postcss-mixins';
+import postcssNesting from 'postcss-nesting';
+import postcssImport from 'postcss-import';
+
+function colors({
+  style,
+  state,
+  psudoClass,
+  className,
+  visibleWrapperClass,
+  otherParameters,
+}) {
+  let selector = '&';
+  if (psudoClass != null) {
+    selector += `:${psudoClass}`;
+  }
+  if (className) {
+    selector = `${selector}.${className}`;
+  }
+  if (visibleWrapperClass) {
+    selector = `${selector} ${visibleWrapperClass}`;
+  }
+  if (state === 'hover') {
+    return {
+      [selector]: {
+        'border-color': `color-mix(in srgb, var(--${style}-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color))`,
+        'background-color': `color-mix(in srgb, var(--${style}-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color))`,
+        ...otherParameters,
+      },
+    };
+  } else {
+    let extraParameters = {};
+    if (['enabled', 'activated'].includes(state)) {
+      extraParameters = {
+        '--base-border-color': `var(--${style}-${state}-border-color)`,
+        '--base-background-color': `var(--${style}-${state}-background-color)`,
+      };
+    }
+
+    return {
+      [selector]: {
+        'border-color': `var(--${style}-${state}-border-color)`,
+        'background-color': `var(--${style}-${state}-background-color)`,
+        ...otherParameters,
+        ...extraParameters,
+      },
+    };
+  }
+}
+
+function parseParams(params) {
+  const paramsArray = params.split(' ');
+  const paramsObject = {};
+  paramsArray.forEach((param) => {
+    const [key, value] = param.split('=');
+    paramsObject[key] = value || true;
+  });
+  if (!paramsObject.style) {
+    throw new Error('style is required');
+  }
+  return {
+    style: paramsObject.style,
+    visibleWrapperClass: paramsObject.visibleWrapperClass,
+    noClick: paramsObject.noClick,
+  };
+}
+
+const styleMixin = (data) => {
+  const params = parseParams(data.params);
+
+  if (params.noClick) {
+    return colors({
+      ...params,
+      style: params.style,
+      state: 'enabled',
+      otherParameters: {
+        'border-width': '1px',
+        'border-style': 'solid',
+      },
+    });
+  }
+
+  let focusVisibleWrapper = '&:focus-visible';
+  if (params.visibleWrapperClass) {
+    focusVisibleWrapper = `${focusVisibleWrapper} ${params.visibleWrapperClass}`;
+  }
+
+  const isIntegration = params.style.startsWith('integration-');
+  let disabledColor = `var(--on-${params.style}-disabled-color)`;
+  if (isIntegration) {
+    const styleWithoutIntegration = params.style.replace('integration-', '');
+    disabledColor = `var(--integration-on-${styleWithoutIntegration}-disabled-color)`;
+  }
+
+  const out = {
+    '&': {
+      cursor: 'pointer',
+    },
+    '&:focus': {
+      outline: 'none',
+    },
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'enabled',
+      otherParameters: {
+        'border-width': '1px',
+        'border-style': 'solid',
+        cursor: 'pointer',
+      },
+    }),
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'activated',
+      className: 'activated',
+    }),
+    '@media (hover:hover)': {
+      ...colors({
+        ...params,
+        style: params.style,
+        state: 'hover',
+        psudoClass: 'hover',
+      }),
+    },
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'pressed',
+      psudoClass: 'active',
+    }),
+    [focusVisibleWrapper]: {
+      'outline-color': 'var(--border-focus-color)',
+      'outline-width': 'var(--global-size-spacing-border-weight-focusframe)',
+      'outline-style': 'solid',
+      'border-color': 'var(--container-global-color)',
+      'z-index': '1',
+    },
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'disabled',
+      psudoClass: 'disabled',
+      otherParameters: {
+        cursor: 'not-allowed',
+        color: disabledColor + ' !important',
+      },
+    }),
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'disabled',
+      className: 'disabled',
+      otherParameters: {
+        cursor: 'not-allowed',
+        color: disabledColor + ' !important',
+      },
+    }),
+  };
+  if (params.visibleWrapperClass) {
+    out['&:disabled'] = {
+      cursor: 'not-allowed',
+    };
+    out['&.disabled'] = {
+      cursor: 'not-allowed',
+    };
+  }
+  return out;
+};
+
+export default (ctx) => ({
+  parser: ctx.parser ? 'sugarss' : false,
+  map: ctx.env === 'development' ? ctx.map : false,
+  plugins: [
+    postcssImport(),
+    postcssMixins({
+      mixinsDir: path.join(process.cwd(), 'src', 'mixins'),
+      mixins: {
+        style: styleMixin,
+      },
+    }),
+    postcssNesting(),
+    {
+      postcssPlugin: 'append-global-styles',
+      Once(root) {
+        root.prepend(`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+        `);
+      },
+    },
+  ],
+});