npm package: @financial-times/pro-ask-ft-kit
Description: This package contains the Shared utils between App and Web versions & UI components for App version, which will give us the freedom to develop our components in isolation using TS & React giving us a better DevX
Latest version: 0.3.10

# Pro Ask FT kit

This package contains the Shared utils between App and Web versions & UI components for App version, which will give us the freedom to develop our components in isolation using TS & React giving us a better DevX

## Install `pro-ask-ft-kit`

```sh
npm install @financial-times/pro-ask-ft-kit
```

## Structure

```
lib/
├── components/
│   └── mobile/        # components for mobile app
│   └── web/           # components for the web app
├── hooks/             # shared hooks
└── utils/             # shared util functions
```

## Tools

- The project is using storybook for better development experience for the components
- Vite for faster load time

# Contribution

## Setup

### Installation

1. Clone the repository

2. Install the dependencies by running

```shell
npm install
```

To install the app's dependencies you will need to configure npm authentication for Cloudsmith. The `.npmrc` file tells NPM to fetch its dependencies from FT's Cloudsmith registry. To configure Npm to use a Cloudsmith repository rather than the default npmjs index is to configure the registry property in your `.npmrc` file:

```shell
registry=https://npm.packages.ft.com/financial-times-internal-releases/
//npm.packages.ft.com/financial-times-internal-releases/:_authToken={CLOUD_SMITH_USER_AUTH_TOKEN}
```

Read [this Tech Hub guide](https://tech.in.ft.com/tech-topics/development-tools/package-management/cloudsmith/set-up-a-node-developer-environment-to-use-cloudsmith) for more information about this, and how to get access to it if you're having trouble.

### Build

To build the components, run:

```bash
npm run build
```

The output will be located in the /dist folder.

### 🔗 NPM Linking with the ft-app

Currently `pro-ask-ft-kit` mobile components are used on the ft-app. To develop and test `pro-ask-ft-kit` components inside the `ft-app`, follow these steps:

#### 1. Set Up `ft-app`

If you haven’t already, set up the `ft-app` locally by following one of the guides below:

- [ft-app README – Quick Start Guide](https://github.com/Financial-Times/ft-app?tab=readme-ov-file#quick-start-guide)
- [Confluence – Setting up dev environment](https://financialtimes.atlassian.net/wiki/x/pADwCgI)

#### 2. Link the Package

In your local `pro-ask-ft-kit` project folder, run:

```bash
npm link
```

This will create a global symlink for the package.

#### 3. Link Inside ft-app
In the root of your local `ft-app` project, run:

```bash
npm link @financial-times/pro-ask-ft-kit
```

This links the globally symlinked version of `pro-ask-ft-kit` into `ft-app`.
> You do not need to re-link after making changes to the package.

#### 4. Build and Run

- Run the `ft-app` locally using `npm run start`
- Every time you make changes to `pro-ask-ft-kit`:
  - rebuild it with `npm run build` command
  - restart the `ft-app` to see your updates reflected

#### 🛠 Alternative: Manual Install
If symlinking via `npm link` does not work correctly, use this alternative:

```bash
npm install ../pro-ask-ft-kit
```

Run this from the root of `ft-app`, adjusting the relative path if necessary. This will install the local package directly without symlinking.

## 📚 Storybook

- Run storybook:  `npm run storybook`
- Access Storybook in your browser at: http://127.0.0.1:6006/ or http://localhost:6006/ 

## 🧪 Testing

To run tests, use the following command:

```shell
npm run test
```

## 🚀 Publishing a new version

After merging a pull request with a new feature or fix, publish a new version to NPM:

1. Make sure you're on main branch: `git checkout main`

2. To publish a new version `npm run bump:(patch/minor/major)`
    - patch: Fixes bugs in a backward-compatible way.
    - minor: Adds new, backward-compatible functionality.
    - major: Introduces breaking changes that are not backward compatible.

3. Run `git push --follow-tags` to push the new version to GitHub
   - it will trigger the CircleCI pipeline that publishes the new version on NPM.
   - it will update the version in `package.json` file