Triptease Web Components

This package provides a collection of web components following the open-wc recommendation.

Installation

npm i @triptease/webcomponents

Usage

<script type="module">
  import '@triptease/webcomponents';
</script>

Components

This package provides the following web components:

<tt-combobox>: A customizable dropdown selection component
<tt-date-picker>: A component for selecting a single date
<tt-date-range-picker>: A component for selecting a date range

For detailed documentation on how to use these components, including properties, examples, and best practices, please refer to the Triptease Design System documentation.

Breaking changes

v1.0.0: Date Format

What changed: tt-date-picker and tt-date-range-picker components now return date values as YYYY-MM-DD strings instead of Date objects.

// Before (v0.13.0)
form.value.date; // Date {2025-04-04T12:00:00.000Z}

// After (v1.0.0)
form.value.date; // "2025-04-04"

This change eliminates timezone inconsistencies and improves data interoperability. When converting these strings back to Date objects, be cautious of potential timezone shifts.

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Time Management

This library uses Luxon internally to handle date calculations and timezone management. Our date components (tt-date-picker and tt-date-range-picker) use Luxon to ensure consistent date handling across different environments.

Mocking Luxon in Tests

When writing tests, you may need to mock the current date and time. You can do this by setting Settings.now to a specific timestamp. This allows you to control the "current" time during tests, ensuring consistent results.

// Reset now after tests
afterEach(() => {
  Settings.now = () => Date.now(); // Reset to default
});

// Mock now with Luxon
const mockNow = DateTime.fromISO('2025-04-04T12:00:00', { zone: 'America/New_York' });
Settings.now = () => mockNow.toMillis();

Testing with different timezones

When testing date components, you might need to simulate different timezones. You can use Luxon's Settings.defaultZone to set a specific timezone during tests:

import { Settings } from 'luxon';

// Set timezone for testing
beforeEach(() => {
  Settings.defaultZone = 'America/New_York';
});

// Reset timezone after tests
afterEach(() => {
  Settings.defaultZone = 'system';
});

Date Format Considerations

When working with dates in tests, remember that:

Input dates can be provided as ISO strings or Date objects
Our components normalize dates to the start of the day in UTC
All date comparisons should consider timezone offsets
Use toISOString() when comparing date values in tests
For detailed examples of testing date components, see the test files in the test directory.

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with `web-dev-server`

npm start

To run a local development server that serves the basic demo located in demo/index.html