Skip to content

Folder Structure

Folder Structure

Root Structure

ion/
├── docs/                 # Documentation (this folder)
├── e2e/                  # End-to-end tests (Playwright)
├── public/               # Static public assets
├── src/                  # Source code
├── coverage/             # Test coverage reports
├── dist/                 # Build output
├── node_modules/         # Dependencies
├── .github/              # GitHub workflows and configs
├── package.json          # Project configuration
├── vite.config.ts        # Vite configuration
├── vitest.config.ts      # Vitest configuration
├── playwright.config.ts  # Playwright configuration
├── tsconfig.json         # TypeScript configuration
├── tailwind.config.js    # Tailwind CSS configuration
└── eslint.config.js      # ESLint configuration

Source Directory (`src/`)

src/
├── assets/               # Static assets
│   ├── primevue/         # PrimeVue component styles
│   ├── products/         # Product images/icons
│   └── *.json            # Static data files
│
├── components/           # Reusable Vue components
│   ├── common/           # Generic utility components
│   │   ├── CustomToggle.vue
│   │   ├── GitBranch.vue
│   │   ├── HeaderView.vue
│   │   ├── TitleHeader.vue
│   │   └── TruncateText.vue
│   ├── connections/      # Connection management components
│   ├── execution/        # Execution display components
│   ├── workflow/         # Workflow builder components
│   ├── webhook/          # Webhook components
│   ├── Header/           # App header components
│   ├── SideBar/          # Navigation sidebar
│   └── Editor/           # Monaco JSON editor
│
├── constants/            # Application constants
│   └── menu.ts           # Navigation menu configuration
│
├── guards/               # Route guards
│   ├── auth.guard.ts     # Authentication guard
│   └── keycloak.guard.ts # Keycloak SSO guard
│
├── helpers/              # Utility functions
│   ├── auth.config.ts    # Auth configuration
│   └── utils.ts          # General utilities
│
├── hooks/                # Vue composables
│   ├── data.table.params.ts
│   └── useThemeColor.ts
│
├── interfaces/           # Abstract service classes
│   ├── apps.service.ts
│   ├── connection.abstract.service.ts
│   ├── flows.abstract.service.ts
│   └── ...
│
├── lang/                 # Internationalization
│   ├── en/               # English translations
│   ├── es/               # Spanish translations
│   └── index.ts          # i18n configuration
│
├── layouts/              # Application layouts
│   ├── AdminLayout.vue
│   ├── CompanyLayout.vue
│   └── WorkspaceLayout.vue
│
├── lib/                  # Utility libraries
│   └── utils.ts          # shadcn/ui style utilities
│
├── models/               # TypeScript types and models
│   ├── app.ts
│   ├── company.ts
│   ├── connection.ts
│   ├── flow.ts
│   ├── user.ts
│   └── tenant/           # Tenant-specific models
│
├── router/               # Vue Router configuration
│   ├── index.ts          # Main router setup
│   ├── admin.ts          # Admin routes
│   ├── tenant.ts         # Tenant routes
│   └── workspace.ts      # Workspace routes
│
├── services/             # API services
│   ├── admin/            # Admin-specific services
│   ├── tenant/           # Tenant-specific services
│   ├── workspace/        # Workspace-specific services
│   ├── api.ts            # Axios instance
│   ├── api.service.ts    # Base service class
│   └── generic.service.ts
│
├── setup/                # Application setup
│   ├── app-setup.ts      # Vue app setup
│   ├── global-setup.ts   # Global configuration
│   └── tanstack-setup.ts # TanStack Query setup
│
├── stores/               # Pinia stores
│   ├── auth.ts           # Authentication store
│   └── counter.ts        # Example store
│
├── views/                # Route views/pages
│   ├── admin/            # Admin pages
│   ├── tenant/           # Tenant pages
│   ├── workspace/        # Workspace pages
│   ├── LoginView.vue
│   └── NotFoundView.vue
│
├── App.vue               # Root component
├── main.ts               # Application entry point
└── style.css             # Global styles

Component Organization

Reusable Components (`src/components/`)

Components that can be used across multiple views:

Directory	Purpose
`common/`	Generic utility components
`connections/`	Connection management
`execution/`	Execution display
`workflow/`	Workflow builder
`webhook/`	Webhook management
`Header/`	Application header
`SideBar/`	Navigation sidebar
`Editor/`	JSON editor

Domain Components (`src/views/*/components/`)

Components specific to a feature domain live within the view:

src/views/tenant/integrations/
├── IntegrationListView.vue
└── components/
    ├── IntegrationCard.vue
    └── IntegrationFilter.vue

File Naming Conventions

Type	Convention	Example
Components	PascalCase.vue	`FlowCard.vue`
Composables	camelCase.ts	`useFlowData.ts`
Services	kebab-case.service.ts	`flow.service.ts`
Stores	kebab-case.ts	`auth.ts`
Models	kebab-case.ts	`flow.ts`
Tests	*.spec.ts	`TruncateText.spec.ts`