# Project Context: Tulip Appointments Web Widget

## Overview
The Tulip Appointments Web Widget (`@tulipnpm/timekit_project_selector`) is a JavaScript library that extends the functionality of [TimeKit's Booking Widget](https://developers.timekit.io/docs/booking-widget-v2). It allows users to set up selectors based on project metadata to filter TimeKit projects for customer bookings. It supports a default UI (Popup or Page mode) and a Custom UI mode.

## Tech Stack
- **Language:** JavaScript (ES6+)
- **Build Tool:** Webpack (^5.14.0)
- **Testing Framework:** Jest (^26.6.3)
- **Transpilation:** Babel
- **Key Dependencies:** `axios` (^0.21.1), `lodash` (^4.17.20), `@babel/runtime` (^7.12.5)
- **Key DevDependencies:** `webpack` (^5.14.0), `jest` (^26.6.3), `babel-loader` (^8.2.2)

## Project Structure
- **`src/`**: Core source code.
    - **`ConfigurationManager.js`**: Manages widget configurations.
    - **`TimekitApiClient.js`**: Client for interacting with TimeKit API.
    - **`Strategy/`**: Contains strategies for project selection (e.g., `DefaultProjectStrategy`, `LocationsStrategy`).
    - **`Steps/`**: Logic for widget steps (`Step.js`, `StepsFactory.js`).
    - **`ui/`**: UI components (`widget.js`, `searchbar.js`, `embed.js`, etc.).
    - **`styles/`**: CSS files for the widget.
    - **`callbacks/`**: Logic for specific callbacks (e.g., auto-assigning associates).
- **`test/`**: Test files.
    - **`unittests/`**: Jest unit tests corresponding to source files.
    - **`data/`**: Mock data for tests.
    - HTML files (`custom.html`, `embed.html`, `index.html`) for testing different modes.
- **`dist/`**: Distribution files (built artifacts).

## Key Scripts
- **Build:** `npm run build` (runs `webpack`)
- **Development Server:** `npm run start-dev` (runs `webpack serve --mode development`)
- **Test:** `npm test` (runs `jest`)
- **CI Test:** `npm run test:ci` (runs jest with coverage and CI reporters)
- **Watch:** `npm run watch` (runs `webpack --watch`)

## Development Conventions
- **Code Style:** Follows standard JavaScript conventions.
- **Testing:** Unit tests are located in `test/unittests` and mirror the structure of `src`.
- **Building:** The project uses Webpack to bundle the library for distribution.
- **Configuration:** Project configurations are managed via `ConfigurationManager`.

## Gotchas & Implementation Details
- **External Dependencies:** The library relies on `TimekitBooking` being available in the global scope (provided by TimeKit's `booking.min.js`). It is not imported via `npm`.
- **Symbol Typos:** Note that "Strategy" is misspelled as "Statergy" in several key symbols, including the file `src/Strategy/ServiceProjectsStatergy.js` and its corresponding class name.
- **Template Resolution:** Card rendering uses a custom template parser in `src/ui/helpers.js` that resolves placeholders like `{{[meta]key}}` or `{{[project]key}}`.
- **State Management:** The application uses a custom singleton store (`src/ProjectsStore.js`) to manage the state of fetched projects and active filters.
- **CSS Injection:** Styles are imported in `src/index.js` and injected into the DOM at runtime, typically using Webpack's `style-loader`.