# Filenames

{% hint style="info" %}
By default, filenames should **match the name of the declaration** **being exported** (both the text and the casing).  Common exceptions include:

* **Page-related files**
  * `page.tsx, layout.tsx` (filenames are lowercase)
* **Types/Interfaces**
  * the file is often named `types.ts` and will export multiple local types
* **Schemas**
  * the file is often named `schemas.ts` and will export multiple local schemas
* **Constants**
  * the file is often named `constants.ts` and will export multiple local constants
    {% endhint %}

***

### **Pages**

{% hint style="info" %}
We follow the [**NextJS v13+ folder structure**](https://nextjs.org/docs/getting-started/project-structure#app-routing-conventions) [**\[**1\]](https://nextjs.org/docs/getting-started/project-structure)[**\[2\]**](https://nextjs.org/docs/app/api-reference/file-conventions)
{% endhint %}

<details>

<summary>layout.tsx</summary>

* Filename:
  * `layout.tsx`
* Declaration:
  * `export default function Layout() {...}`
* Location:
  * `~/pages/x/layout.tsx`

</details>

<details>

<summary>page.tsx</summary>

* Filename:
  * `page.tsx`
* Declaration:
  * `export default function Page() {...}`
* Location:
  * `~/pages/x/page.tsx`

</details>

<details>

<summary>index.ts</summary>

* Filename:
  * `index.ts`
* Declaration:
  * `export { default } from './layout'`
* Location:
  * `~/pages/x/index.ts`

</details>

***

### **Components**

{% hint style="info" %}
PascalCase, `.tsx`
{% endhint %}

<details>

<summary>Components</summary>

* *Filename:*
  * `NounAdjective.tsx`
* *Declaration:*&#x20;
  * `export function NounAdjective() {...}`
* *Location:*
  * **database-related:**  components/database folder
    * `~/components/database/x/_components/...`
    * [Learn more about the "database folder" system](https://pavewise.gitbook.io/pavewise-style-guide-and-more/our-systems/components/overview#database-related-component-folders)
  * **reusable/app-wide:**&#x20;
    * **Storybookized:**  components/storybook folder
      * &#x20;`~/components/storybook/NounAdjective/NounAdjective.tsx`
      * *// TODO: Learn more about Storybookizing components here*
    * **Non-Storybookized:**  components folder
      * **standalone, simple:**
        * `~/components/NounAdjective.tsx`
      * **standalone, complex:**
        * `~/components/NounAdjective/NounAdjective.tsx`
        * [Learn more about "component folders" here](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/our-systems/components/overview)
      * **folder of related components:**
        * `~/components/relatedComponents/NounAdjective.tsx`
  * **local:**  \_components folder
    * `ComponentFolder/_components/NounAdjective.tsx`
    * [Learn more about "local" components here](https://pavewise.gitbook.io/pavewise-style-guide-and-more/our-systems/components/overview#local-components)

</details>

***

### **Non-Components**

{% hint style="info" %}
camelCase, `.ts` (generally)
{% endhint %}

<details>

<summary>Helper functions</summary>

* *Filename:*
  * `functionName.ts` *(*`.tsx` *as needed)*
* *Declaration:*&#x20;
  * `export function functionName() {...}`
* *Location:*
  * **reusable/app-wide:**  helpers folder
    * `~/helpers/functionName.ts`
  * **local:**  \_lib folder
    * `ComponentFolder/_lib/functionName.ts`

</details>

<details>

<summary>Hooks</summary>

* *Filename:*
  * `useX.ts` *(*`.tsx` *as needed)*
* *Declaration:*&#x20;
  * `export function useX() {...}`
* *Location:*
  * **reusable/app-wide:**  hooks folder
    * `~/hooks/useX.ts`
  * **local:**  \_lib folder
    * `ComponentFolder/_lib/useX.ts`

</details>

<details>

<summary>Types/Interfaces</summary>

* *Filename:*
  * `types.ts`
* *Declaration:*
  * **database-related:**
    * `export type TDoc = ...`
  * **exported props:**
    * `export interface ComponentProps {...}`
  * **all other:**
    * `export interface TRelevantName {...}`
* *Location:*
  * **database-related**:  "router" folder
    * `~/api/routers/x/types.ts`
  * **reusable/app-wide:**  types folder
    * `~/types/x/types.ts`
  * **local:**  \_lib folder
    * `ComponentFolder/_lib/types.ts`

</details>

<details>

<summary>Schemas</summary>

* *Filename:*
  * `schemas.ts`
* *Declaration:*
  * **database-related**:
    * FE: `schema, schemaCreate, schemaUpdate`
    * BE: `schemaBE, schemaBECreate, schemaBEUpdate`
  * **all other:**
    * `export const schemaX = {...}`
* *Location:*
  * **database-related**  "router" folder
    * `~/api/routers/x/schemas.ts`)
  * **reusable/app-wide:**  schemas folder
    * `~/schemas/x/schemas.ts)`
  * **local:**  \_lib folder
    * `ComponentFolder/_lib/schemas.ts`

</details>

<details>

<summary>Constants</summary>

* *Filename:*
  * `constants.ts`
* *Declaration:*
  * `export const CONSTANT_NAME = '...'` or `{...}` or `...`
* *Location:*
  * **database-related**  "router" folder
    * `~/api/routers/x/constants.ts`)
  * **reusable/app-wide:**  constants folder
    * `~/constants/x/constants.ts)`
  * **local:**  \_lib folder
    * `ComponentFolder/_lib/constants.ts`

</details>