Naming Conventions

Consistent naming is enforced across all Oidis projects. These conventions are validated by the Oidis linter and checked in pre-commit hooks.

Quick Reference

Element	Convention	Example
Classes	PascalCase	OrderRecord, UsersPanelController
Files	PascalCase (matches class)	OrderRecord.ts, UsersPanelController.ts
Public methods	PascalCase	FetchData(), SaveGroup(), ProcessRequest()
Public getter/setter methods	get/set + camelCase	getName(), setName()
JS accessor syntax	PascalCase (no get/set prefix)	get Name(), set Name()
Private/protected members	camelCase	currentUser, validateSlots(), isProcessed
Enum members	UPPER_CASE	TOAST_ERROR, HUB_CONNECTOR, ACTIVE
Method/callback parameters	$ prefix	$instance, $offset, $data
Interfaces	I prefix	IProject, IPropertyOptions, IAuthPromise
Packages & repos	lowercase-dashes	io-oidis-commons, io-oidis-hub-gui
Directories	Mirror namespace	Io/Oidis/LibraryName/
CSS classes (Oidis)	PascalCase	.MainPage, .ProfileImage, .ListContent
CSS classes (Bootstrap)	kebab-case	.btn-primary, .d-flex (follow Bootstrap docs)
SCSS vars/functions/mixins	camelCase or kebab-case	$primaryColor, @mixin card-shadow

Classes and Files

Every TypeScript file contains one primary class, and the filename matches the class name exactly:

OrderRecord.ts           → export class OrderRecord
UsersPanelController.ts  → export class UsersPanelController
InventoryManager.ts      → export class InventoryManager

Class names use PascalCase with no abbreviations (prefer OrderRecord over OrdRec).

Common Suffixes

Suffix	Purpose	Example
Panel	UI view component	UsersPanel, DashboardPanel
PanelController	UI controller	UsersPanelController
Page	Page layout	MainPage, LoginPage
PageController	Page controller	MainPageController
Connector	RPC connector (FE or BE)	InventoryManagerConnector
Manager	Backend service	AuthManager, InventoryManager
Record	Data model	ProductRecord, OrderRecord
Store	Frontend state singleton	PendingRegistrationStore
Binding	UI binding helper	EventsBinding, ValidationBinding
Converter	Model converter	ProductToRefConverter
Validator	Model validator	EmailValidator, RangeValidator
Helper	Utility class	ERPHelper, EnvironmentHelper
Table	Custom table control	OrderTable, ProductsTable
TableItem	Table row component	OrderTableItem
Dialog	Dialog component	ConfirmDialog, EditRecordDialog

Methods

Public Methods — PascalCase

All public methods use PascalCase. This is one of the most distinctive Oidis conventions:

// ✅ Correct
public FetchData() : Promise<void> { ... }
public SaveGroup($data : GroupRecord) : Promise<void> { ... }
public ProcessOrder($record : OrderRecord) : boolean { ... }

// ❌ Incorrect
public fetchData() : Promise<void> { ... }
public save_group() : Promise<void> { ... }

Public Getters/Setters — get/set + camelCase

When using method-style getters and setters (not JS accessor syntax):

// Method-style (explicit methods)
public getName() : string { return this.name; }
public setName($name : string) : void { this.name = $name; }

When using JavaScript accessor syntax, use PascalCase without get/set prefix:

// JS accessor syntax
public get Name() : string { return this.name; }
public set Name($value : string) { this.name = $value; }

Private and Protected — camelCase

private currentUser : User = null;
protected isProcessed : boolean = false;

private validateForm($instance : MyPanel) : boolean { ... }
protected populateDropdown($instance : MyPanel) : void { ... }

Parameters

The $ Prefix Convention

Method and callback parameters use a $ prefix to visually distinguish them from local variables and class members:

// ✅ Method parameters use $
public async SaveRecord($data : RecordData, $userId : string) : Promise<void> {
    const result = await this.client.Save($data);  // $data = parameter
    const message = "Saved";                        // message = local variable
    this.lastSavedBy = $userId;                     // this.* = class member
}

// ✅ Callback parameters use $
$instance.table.BindData(
    async ($offset, $limit) => { ... },
    async ($data, $item) => { ... },
    async ($item) => { ... }
);

// ❌ Local variables do NOT use $
const $result = something;  // Wrong — not a parameter

The $ prefix is ONLY for parameters — never for local variables, class fields, or module-level variables.

Interfaces

Interfaces use an I prefix:

export interface IProject {
    Name : string;
    Version : string;
}

export interface IPropertyOptions {
    type : any;
    symbol? : string;
    required? : boolean;
}

export interface IAuthPromise {
    resolve : ($token : string, $version? : string, $format? : DataFormatType) => void;
    auth : string;
}

Enums

Enum names use PascalCase; members use UPPER_CASE:

export enum ToastType {
    SUCCESS,
    ERROR,
    WARNING,
    INFO
}

export enum MenuItemScope {
    ADMINS,
    HIDDEN,
    MOBILE_ONLY
}

export enum WebServiceClientType {
    HUB_CONNECTOR,
    DESKTOP_CONNECTOR,
    BUILDER_CONNECTOR,
    REST_CONNECTOR
}

Packages and Repositories

Package names use lowercase with dashes, prefixed with io-oidis-:

io-oidis-commons
io-oidis-services
io-oidis-gui
io-oidis-usercontrols
io-oidis-localhost
io-oidis-hub
io-oidis-hub-gui
io-oidis-yourproject    ← Solution project

The import alias matches the package name with an @ prefix:

import { LogIt } from "@io-oidis-commons/.../Utils/LogIt.js";
import { BasePanel } from "@io-oidis-gui/.../BasePanel.js";

Directory Structure

Directories mirror the namespace hierarchy:

source/typescript/Io/Oidis/[LibraryName]/
├── Models/
├── Utils/
├── Connectors/
├── HttpProcessor/Resolvers/
├── Interfaces/
├── Gui/
│   ├── Models/Converters/
│   ├── Pages/
│   ├── Panels/
│   ├── Controllers/
│   │   ├── Pages/
│   │   └── Panels/
│   ├── Connectors/
│   ├── Stores/
│   ├── UserControls/
│   ├── Dialogs/
│   └── Bindings/
├── Loader.ts
└── ForceCompile.ts

Resources follow a similar pattern:

resource/
├── sass/Io/Oidis/[LibraryName]/
├── template/Io/Oidis/[LibraryName]/
├── data/Io/Oidis/[LibraryName]/
├── graphics/Io/Oidis/[LibraryName]/
└── javascript/Io/Oidis/[LibraryName]/

CSS Classes

Oidis Classes — PascalCase

Custom CSS classes in Oidis projects use PascalCase:

<div class="MainPage">
    <div class="ProfileImage"></div>
    <div class="ListContent"></div>
    <div class="EditContent"></div>
</div>

.MainPage {
    .ProfileImage {
        width: 48px;
        height: 48px;
    }
    .ListContent {
        padding: 16px;
    }
}

Third-Party Classes — Follow Their Convention

Bootstrap 5 uses kebab-case. When mixing Oidis and Bootstrap classes, each follows its own convention:

<div class="MainPage d-flex justify-content-between">
    <div class="ProfileImage rounded-circle"></div>
    <div class="ListContent col-md-8"></div>
</div>

Import Extensions

Always use .js extensions in import paths, even for TypeScript files:

// ✅ Correct
import { LogIt } from "@io-oidis-commons/.../Utils/LogIt.js";
import { ProductRecord } from "../../Models/ProductRecord.js";

// ❌ Incorrect
import { LogIt } from "@io-oidis-commons/.../Utils/LogIt";
import { ProductRecord } from "../../Models/ProductRecord.ts";

This is required by the NodeNext module resolution strategy used by Oidis projects.

Type Annotations — Space Before and After Colon

Oidis uses spaces on both sides of the type colon:

// ✅ Correct — space before AND after colon
public Name : string;
private count : number = 0;
public async FetchData() : Promise<void> { ... }
const result : boolean = true;

// ❌ Incorrect — TypeScript default style
public Name: string;
private count: number = 0;
public async FetchData(): Promise<void> { ... }

This applies to:

• Variable declarations
• Function return types
• Parameter types
• Property declarations

Language Requirement

All source code must be written in English — this includes class names, method names, variable names, comments, and documentation strings.

User-facing hardcoded text (labels, messages, tooltips) may use the application's target language only when no localization mechanism is available. When a localization system is in place (e.g., AuthManager language mutations), all user-facing strings must go through that system.

Summary Checklist

When naming anything in an Oidis project:

• All code-level text is in English
• Class name is PascalCase and matches filename
• Public methods are PascalCase
• Private/protected members are camelCase
• Parameters have $ prefix
• Interfaces have I prefix
• Enum members are UPPER_CASE
• Imports use .js extension
• Type annotations have spaces on both sides of :
• CSS classes are PascalCase (Oidis) or follow library convention (Bootstrap)
• Package names are io-oidis-* lowercase-dashes

---

See also: TypeScript Formatting | JSDoc Conventions | File Headers