Folder structure, components naming and importing conventions

Our folder structure and file naming follows modern frontend project guidelines, https://react-file-structure.surge.sh/

List of rules we agreed on:

Filenames and folder structure:

Each component should have it’s own folder eg:

• src/components/ebo-modal/ebo-modal.vue
• src/components/ebo-modal/index.js

Global reusable components should be in /src/components/folder, view or feature related components should be siting in the components folder in the view or feature folder, see the example from previous rule.

Components in a view or feature should not repeat the name of the view in the filename eg:

• Bad: src/views/dashboard/funding-account/components/ebo-funding-account-currencies-dropdown/ebo-funding-account-currencies-dropdown.vue
• Good: src/views/dashboard/funding-account/components/currencies-dropdown/currencies-dropdown.vue

Components in a view or feature should not have their filename prefixed with ebo-, only global components should eg:

• Bad: src/components/modal/modal.vue or src/views/dashboard/funding-account/components/ebo-currencies-dropdown/ebo-currencies-dropdown.vue
• Good: src/components/ebo-modal/ebo-modal.vue or src/views/dashboard/funding-account/components/currencies-dropdown/currencies-dropdown.vue

Importing components in the views:

Import name should be always in format Ebo in Pascal case where parent-name could the view name or feature name. Import EboFundingAccountCurrenciesDropdown from './components/currencies-dropdown'; Import of the global component should be always in format Ebo in Pascal case eg:

• Bad: import Modal from '@/components/ebo-modal' or import EboDashboardModal from '@/components/ebo-modal'
• Good: import EboModal from '@/components/ebo-modal'

NOTE: If you think the parent name is too long and doesn’t make sense to have the name of the component, try to categorise the component into a feature, to break down the folder tree: eg:

• Not very good name: /trade-finance/submitted-requests/components/add-suppliers-modal/add-suppliers-modal.vue imported as: EboSubmittedRequestsAddSuppliersModal
• Better name: /trade-finance/submitted-requests/suppliers/components/add-modal/add-modal.vue imported as: EboSuppliersAddModal

Name of the component, CSS class, data-test, describe() and mount()

All of them should follow the same rule as the import name. eg:

• /dashboard/funding-account/components/currencies-dropdown/currencies-dropdown.vue

<template>
    <div class="ebo-funding-account-currencies-dropdown" 
        data-test="ebo-funding-account-currencies-dropdown">
        ...
    </div>
</template>

<script>
    export default {
        name: 'EboFundingAccountCurrenciesDropdown',
        ...
    }
</script>

• /dashboard/funding-account/components/currencies-dropdown/currencies-dropdown.spec.js

describe('EboFundingAccountCurrenciesDropdown', () => {
    function mountEboFundingAccountCurrenciesDropdown() {
        // ...
    }
});