# FDS Vue Core

FDS Vue Core is a Vue 3 component library that provides design tokens, icons, and components following Feelgood's digital design guidelines. It includes a comprehensive library of ready-made components such as form fields, buttons, blocks, tables, typography, modals, and more.

## Installation

```bash
pnpm add fds-vue-core
```

## Setup

### Tailwind CSS Configuration

All components use Tailwind CSS. Configure Tailwind in your project:

**tailwind.config.js:**

```javascript
import preset from 'fds-vue-core/tailwind.preset.cjs'

export default {
  presets: [preset],
  // Your other Tailwind configuration
}
```

**style.css:**

```css
@import 'fds-vue-core/tokens.css';
@import 'tailwindcss';
@source '../node_modules/fds-vue-core';
@import 'fds-vue-core/slot-styles.css';
@import 'fds-vue-core/apply.css';
@import 'fds-vue-core/fonts.css';
```

### Register Components

**main.ts:**

```js
import { createApp } from 'vue'
import App from './App.vue'
import FdsVueCore from 'fds-vue-core'
import i18n from './i18n'

const app = createApp(App)
app.use(i18n)
app.use(FdsVueCore, { i18n })
app.mount('#app')
```

If your app already installs Vue I18n globally, components can use that directly. Passing `{ i18n }` to `FdsVueCore` additionally makes the i18n instance available via the provided `FDS_VUE_CORE_I18N_KEY` injection key for components/composables inside this library.

## Usage

After registration, you can use components directly in your templates:

```vue
<template>
  <FdsButtonPrimary>Click me</FdsButtonPrimary>
  <FdsInput v-model="value" />
  <FdsTreeView :nodes="treeData" />
</template>
```

### FdsWizard (Route-Based)

`FdsWizard` is a route-based step component. It only renders the step indicator and emits navigation; **all data lives in the consumer**. Listen to `@go`, call `router.push({ name: payload.route.routeName, params, query })`, and pass the current route name via `activeRouteName` (or rely on vue-router so the component reads `currentRoute.name`).

```vue
<script setup lang="ts">
import { ref } from 'vue'

const activeRouteName = ref('wizard-start')

const wizardRoutes = [
  { id: 'start', name: 'Start', routeName: 'wizard-start' },
  { id: 'details', name: 'Details', routeName: 'wizard-details' },
  { id: 'review', name: 'Review', routeName: 'wizard-review' },
]

const handleGo = (payload: { route: { routeName: string } }) => {
  activeRouteName.value = payload.route.routeName
}
</script>

<template>
  <FdsWizard :routes="wizardRoutes" :activeRouteName="activeRouteName" :completedTo="0" @go="handleGo">
    <template #default="{ currentRoute, currentStepIndex, nextStep, previousStep }">
      <p>Current step: {{ currentRoute?.name }}</p>
      <button @click="previousStep">Previous</button>
      <button @click="nextStep">Next</button>
    </template>
  </FdsWizard>
</template>
```

`routes` items: `id`, `name`, `routeName` (required); `to`, `params`, `query` (optional, for your router); `disabled` (optional).

### Individual Component Import

You can also import specific components:

```js
import { FdsButtonPrimary, FdsInput, FdsModal } from 'fds-vue-core'
```

## TypeScript Support

All components are fully typed. Type definitions are included in the package.

## Commit workflow

Use these commands to create commits with the shared Commitizen adapter and security dependency helper.

### In this repo

```bash
pnpm commit
pnpm commit:vuln
```

- `pnpm commit` starts Commitizen prompts (configured via `scripts/cz/cz-adapter.cjs`).
- `pnpm commit:vuln` runs `scripts/vuln-commit.mjs` and auto-creates a `vuln(...)` commit from staged `package.json` dependency bumps.

### In a consuming repo

Install dependencies:

```bash
pnpm add fds-vue-core
pnpm add -D commitizen
```

Add this to the consuming repo `package.json`:

```json
{
  "scripts": {
    "commit": "cz",
    "commit:vuln": "fds-vuln-commit"
  },
  "config": {
    "commitizen": {
      "path": "fds-vue-core/cz-adapter"
    }
  }
}
```

## Further Documentation

- [Usage Guide](./src/docs/Usage.md) - Detailed usage instructions
- [Configuration Files](./CONFIG.md) - TypeScript, ESLint, Prettier, and VS Code configuration
- [Storybook](./) - Component API documentation and examples (run `pnpm storybook`)

### Local development in another project (pnpm)

When you want to test `fds-vue-core` changes in another pnpm-based project **without** publishing to npm, use a local `file:` dependency instead of `yalc`:

In the consuming project, add the dependency pointing to your local checkout of `fds-vue-core`:

```bash
pnpm add file:../../fds-vue-core
```

Adjust the relative path so it points to this repo from your consuming project. After that:

- Run `pnpm install` in the consuming project as usual.
- Rebuild `fds-vue-core` when you change it (for example `pnpm build` in this repo), then restart or reload the consuming app if needed.

> Note: `yalc` is not recommended together with pnpm in this setup; use `pnpm add file:...` instead.

### Publish to npm

After you are done editing the fds-vue-core project you want to publish your changes in order to be able to access the changes in the projects that are using fds-vue-core.

1. Bump the version in `package.json` (Use the [Semver](https://semver.org/) set of rules for versioning).
2. Push your changes to github.
3. Publish the new version to npm: `npm publish --access-public`. (You might need to login: `npm login`)
4. Authenticate your account