# Ketchup Next Gen

Ketchup2 is a **TypeScript-first React component library** designed specifically for Smeup business applications. It provides:

- **Pre-built UI components** organized by domain (basic, functional, and complex components)
- **Data-driven architecture** that works seamlessly with Smeup data structures
- **Design system integration** with consistent tokens for colors, spacing, and typography
- **Comprehensive documentation** via Storybook and MDX guides
- **Full test coverage** with unit and visual regression testing

**Key Focus:** Building enterprise-grade business UIs with Smeup-specific data patterns and accessibility in mind.

## Getting started

See [prerequisite](docs/PREREQUISITES.md) and [Init docs page](docs/INIT.md) to start working on the library.

## Development

See [Project Structure](docs/PROJECT-STRUCTURE.md) to learn how the project is structured.
See [Styleguide](docs/STYLEGUIDE.md) to learn our convention.
See [First Example](docs/FIRST-EXAMPLE.md) to gain confidence creating your first component

## Validation

See [Development Process](docs/DEVPROCESS.md)

## Visual Regression Testing

- Canonical VRT environment is Docker (Linux + Playwright image).
- Run local VRT with the same setup used in CI:
  - `docker compose run --rm vrt`
  - `npm run test:vrt`
- Update snapshots locally:
  - `npm run test:vrt:update`
- CI can also regenerate snapshots when PR has label `update snapshots` (or via manual dispatch input).

## Shapes and Components

If you want to know what shapes/components are currently supported you can checkout here:
[Shapes Status ](docs/SHAPES.md) <br>
[Component Status ](docs/COMPONENTS.md)

## Allowed components data formats

This component library is designed to work strictly with a predefined set of data formats. This ensures consistency, reliability, and full interoperability within the library and for all its consumers.
[Data formats ](docs/DATAFORMATS.md)
