# Adding new components

- New components go into `lib/components/*`

- The folder structure follows PrimeVue documentation's sidebar structure
  - Examples:
    - [autocomplete](~https://primevue.org/autocomplete/~) -> `lib/components/form/autocomplete`
    - [splitbutton](~https://primevue.org/splitbutton/~) -> `lib/components/button/splitbutton`
    - [card](~https://primevue.org/card/~) -> `lib/components/panel/card`

- At the very minimum, each component should export
  - `index.ts` (make sure to export all related components as well as types)
    - for example, see `lib/components/data/datatable/index.ts`
  - `tokens.ts` (mappings between Aura theme and Figma file)
    - This is, unfortunately, a manual process since there is no obvious correlation between the two data structures
    - Find your component object in `scripts/figma-to-prime-vue/mapData/todoComponents.ts`
    - Move the component object to `lib/components/component/tokens.ts`
    - Using `scripts/figma-to-prime-vue/data/Figma.processed.json`, write mappings by providing paths
    - For numeric dimensions (e.g. height, width, gap, size), use Aura from **`'@primeuix/themes/aura'`** as the reference for units: use `rem` or `px` in `f(path, rem)` / `f(path, px)` according to what Aura uses for that token
    - Prefer **component path** for `a()`: use `a(components.<component>.<section>.<property>)` (e.g. `a(components.select.root.shadow)`) instead of generic semantic paths like `a(semantic.colorScheme.light.formField.shadow)`
    - **Never remove** a property because of a "Path not found" warning; fix the warning by using the correct component path (or adding the path to Aura if missing)

- If the component adds or removes functionality,
  - spec file(s) are required
  - `docs.ts` file is required (see `lib/components/button/button/docs.ts`)

- To add or update **component documentation** (guidelines, Sonik vs PrimeVue, live examples), see [DOCS_SITE.md](./DOCS_SITE.md). The docs page content is in **`docs-site/components/<category>/<name>.md`**.

- Run `npm run build`
  - This will check types, build types, exports, and theme