Skip to content

Commit

Permalink
fix: switch to standard decorators and tighten property types (#3121)
Browse files Browse the repository at this point in the history 
This PR switches from experimental decorators to standard decorators. It additionally tightens the types of properties and applies `forceType` where necessary.
  • Loading branch information
@kyubisation
kyubisation authored Oct 21, 2024
1 parent 5527760 commit e61bca5
Show file tree
Hide file tree
Showing 314 changed files with 2,451 additions and 1,439 deletions.
2 changes: 0 additions & 2 deletions eslint.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,8 +171,6 @@ export default [
},
},
],
// TODO: Activate with standard decorators
'lyne/property-decorator-accessor-rule': 'off',
},
},
{
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@
"stylelint-config-standard-scss": "13.1.0",
"stylelint-scss": "6.8.1",
"ts-lit-plugin": "2.0.2",
"tslib": "2.8.0",
"typescript": "5.6.3",
"typescript-eslint": "8.10.0",
"urlpattern-polyfill": "10.0.0",
Expand All @@ -161,7 +162,7 @@
},
"lint-staged": {
"*.{js,ts,yaml,yml}": [
"eslint --fix"
"eslint --fix --no-ignore"
],
"*.scss": [
"stylelint --fix"
Expand Down
22 changes: 15 additions & 7 deletions src/elements-experimental/journey-summary/journey-summary.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { SbbLanguageController } from '@sbb-esta/lyne-elements/core/controllers.js';
import { defaultDateAdapter } from '@sbb-esta/lyne-elements/core/datetime.js';
import { forceType } from '@sbb-esta/lyne-elements/core/decorators.js';
import { i18nTripDuration } from '@sbb-esta/lyne-elements/core/i18n.js';
import type { SbbDateLike } from '@sbb-esta/lyne-elements/core/interfaces/types';
import type { SbbTitleLevel } from '@sbb-esta/lyne-elements/title.js';
Expand Down Expand Up @@ -35,38 +36,45 @@ export interface InterfaceSbbJourneySummaryAttributes {
*
* @slot content - Use this slot to add `sbb-button`s or other interactive elements.
*/
export
@customElement('sbb-journey-summary')
export class SbbJourneySummaryElement extends LitElement {
class SbbJourneySummaryElement extends LitElement {
public static override styles: CSSResultGroup = style;

/** The trip prop */
@property({ type: Object }) public trip!: InterfaceSbbJourneySummaryAttributes;
@property({ type: Object }) public accessor trip: InterfaceSbbJourneySummaryAttributes = null!;

/** The tripBack prop */
@property({ attribute: 'trip-back', type: Object })
public tripBack?: InterfaceSbbJourneySummaryAttributes;
public accessor tripBack: InterfaceSbbJourneySummaryAttributes = null!;

/**
* The RoundTrip prop. This prop controls if one or two arrows are displayed in the header.
*/
@property({ attribute: 'round-trip', type: Boolean }) public roundTrip?: boolean;
@forceType()
@property({ attribute: 'round-trip', type: Boolean })
public accessor roundTrip: boolean = false;

/** Heading level of the journey header element (e.g. h1-h6). */
@property({ attribute: 'header-level' }) public headerLevel: SbbTitleLevel = '3';
@property({ attribute: 'header-level' }) public accessor headerLevel: SbbTitleLevel = '3';

/**
* Per default, the current location has a pulsating animation. You can
* disable the animation with this property.
*/
@property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
@forceType()
@property({ attribute: 'disable-animation', type: Boolean })
public accessor disableAnimation: boolean = false;

/**
* The Footpath attribute for rendering different icons
* true: render a11y-icon
* false: render walk-icon
* default: render walk-icon
*/
@property({ attribute: 'a11y-footpath', type: Boolean }) public a11yFootpath?: boolean;
@forceType()
@property({ attribute: 'a11y-footpath', type: Boolean })
public accessor a11yFootpath: boolean = false;

/** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
@property()
Expand Down
18 changes: 9 additions & 9 deletions src/elements-experimental/journey-summary/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ This is helpful if you need a specific state of the component.

## Properties

| Name | Attribute | Privacy | Type | Default | Description |
| ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `a11yFootpath` | `a11y-footpath` | public | `boolean \| undefined` | | The Footpath attribute for rendering different icons true: render a11y-icon false: render walk-icon default: render walk-icon |
| `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. |
| `headerLevel` | `header-level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). |
| `now` | `now` | public | `Date` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |
| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header. |
| `trip` | `trip` | public | `InterfaceSbbJourneySummaryAttributes` | | The trip prop |
| `tripBack` | `trip-back` | public | `InterfaceSbbJourneySummaryAttributes \| undefined` | | The tripBack prop |
| Name | Attribute | Privacy | Type | Default | Description |
| ------------------ | ------------------- | ------- | -------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `a11yFootpath` | `a11y-footpath` | public | `boolean` | `false` | The Footpath attribute for rendering different icons true: render a11y-icon false: render walk-icon default: render walk-icon |
| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Per default, the current location has a pulsating animation. You can disable the animation with this property. |
| `headerLevel` | `header-level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). |
| `now` | `now` | public | `Date` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |
| `roundTrip` | `round-trip` | public | `boolean` | `false` | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header. |
| `trip` | `trip` | public | `InterfaceSbbJourneySummaryAttributes` | `null!` | The trip prop |
| `tripBack` | `trip-back` | public | `InterfaceSbbJourneySummaryAttributes` | `null!` | The tripBack prop |

## Slots

Expand Down
3 changes: 2 additions & 1 deletion src/elements-experimental/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"@sbb-esta/lyne-elements": "0.0.0-PLACEHOLDER"
},
"dependencies": {
"lit": "0.0.0-LIT"
"lit": "0.0.0-LIT",
"tslib": "0.0.0-TSLIB"
},
"publishConfig": {
"access": "public"
Expand Down
30 changes: 22 additions & 8 deletions src/elements-experimental/pearl-chain-time/pearl-chain-time.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { SbbLanguageController } from '@sbb-esta/lyne-elements/core/controllers.js';
import { defaultDateAdapter } from '@sbb-esta/lyne-elements/core/datetime.js';
import { forceType } from '@sbb-esta/lyne-elements/core/decorators.js';
import {
i18nArrival,
i18nDeparture,
Expand All @@ -22,8 +23,9 @@ import '../pearl-chain.js';
/**
* Combined with `sbb-pearl-chain`, it displays walk time information.
*/
export
@customElement('sbb-pearl-chain-time')
export class SbbPearlChainTimeElement extends LitElement {
class SbbPearlChainTimeElement extends LitElement {
public static override styles: CSSResultGroup = style;

/**
Expand All @@ -34,28 +36,40 @@ export class SbbPearlChainTimeElement extends LitElement {
* to the total travel time. Example: departure 16:30, change at 16:40,
* arrival at 17:00. So the change should have a duration of 33.33%.
*/
@property({ type: Array }) public legs!: (Leg | PtRideLeg)[];
@property({ type: Array }) public accessor legs: (Leg | PtRideLeg)[] = [];

/** Prop to render the departure time - will be formatted as "H:mm" */
@property({ attribute: 'departure-time' }) public departureTime?: string;
@forceType()
@property({ attribute: 'departure-time' })
public accessor departureTime: string = '';

/** Prop to render the arrival time - will be formatted as "H:mm" */
@property({ attribute: 'arrival-time' }) public arrivalTime?: string;
@forceType()
@property({ attribute: 'arrival-time' })
public accessor arrivalTime: string = '';

/** Optional prop to render the walk time (in minutes) before departure */
@property({ attribute: 'departure-walk', type: Number }) public departureWalk?: number;
@forceType()
@property({ attribute: 'departure-walk', type: Number })
public accessor departureWalk: number = NaN;

/** Optional prop to render the walk time (in minutes) after arrival */
@property({ attribute: 'arrival-walk', type: Number }) public arrivalWalk?: number;
@forceType()
@property({ attribute: 'arrival-walk', type: Number })
public accessor arrivalWalk: number = NaN;

/**
* Per default, the current location has a pulsating animation. You can
* disable the animation with this property.
*/
@property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
@forceType()
@property({ attribute: 'disable-animation', type: Boolean })
public accessor disableAnimation: boolean = false;

/** Optional prop to render wheelchair-small instead of walk-small */
@property({ attribute: 'a11y-footpath', type: Boolean }) public a11yFootpath?: boolean;
@forceType()
@property({ attribute: 'a11y-footpath', type: Boolean })
public accessor a11yFootpath: boolean = false;

/** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
@property()
Expand Down
14 changes: 7 additions & 7 deletions src/elements-experimental/pearl-chain-time/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ This is helpful if you need a specific state of the component.

| Name | Attribute | Privacy | Type | Default | Description |
| ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `a11yFootpath` | `a11y-footpath` | public | `boolean \| undefined` | | Optional prop to render wheelchair-small instead of walk-small |
| `arrivalTime` | `arrival-time` | public | `string \| undefined` | | Prop to render the arrival time - will be formatted as "H:mm" |
| `arrivalWalk` | `arrival-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) after arrival |
| `departureTime` | `departure-time` | public | `string \| undefined` | | Prop to render the departure time - will be formatted as "H:mm" |
| `departureWalk` | `departure-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) before departure |
| `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. |
| `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | | define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. |
| `a11yFootpath` | `a11y-footpath` | public | `boolean` | `false` | Optional prop to render wheelchair-small instead of walk-small |
| `arrivalTime` | `arrival-time` | public | `string` | `''` | Prop to render the arrival time - will be formatted as "H:mm" |
| `arrivalWalk` | `arrival-walk` | public | `number` | `NaN` | Optional prop to render the walk time (in minutes) after arrival |
| `departureTime` | `departure-time` | public | `string` | `''` | Prop to render the departure time - will be formatted as "H:mm" |
| `departureWalk` | `departure-walk` | public | `number` | `NaN` | Optional prop to render the walk time (in minutes) before departure |
| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Per default, the current location has a pulsating animation. You can disable the animation with this property. |
| `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | `[]` | define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. |
| `now` | `now` | public | `Date` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |
9 changes: 6 additions & 3 deletions src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { forceType } from '@sbb-esta/lyne-elements/core/decorators.js';
import type { CSSResultGroup, TemplateResult } from 'lit';
import { html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
Expand Down Expand Up @@ -28,17 +29,19 @@ export interface PearlChainVerticalItemAttributes {
* @slot left - Content of the left side of the item
* @slot right - Content of the right side of the item
*/
export
@customElement('sbb-pearl-chain-vertical-item')
export class SbbPearlChainVerticalItemElement extends LitElement {
class SbbPearlChainVerticalItemElement extends LitElement {
public static override styles: CSSResultGroup = style;

/** The pearlChainVerticalItemAttributes Prop for styling the bullets and line.*/
@property({ attribute: 'pearl-chain-vertical-item-attributes', type: Object })
public pearlChainVerticalItemAttributes!: PearlChainVerticalItemAttributes;
public accessor pearlChainVerticalItemAttributes: PearlChainVerticalItemAttributes = null!;

/** If true, the position won't be animated. */
@forceType()
@property({ attribute: 'disable-animation', reflect: true, type: Boolean })
public disableAnimation?: boolean;
public accessor disableAnimation: boolean = false;

protected override render(): TemplateResult {
const { bulletType, lineType, lineColor, hideLine, minHeight, bulletSize, position } =
Expand Down
4 changes: 2 additions & 2 deletions src/elements-experimental/pearl-chain-vertical-item/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ The slots themselves are unstyled, so that they can be used in various ways.

| Name | Attribute | Privacy | Type | Default | Description |
| ---------------------------------- | -------------------------------------- | ------- | ---------------------------------- | ------- | --------------------------------------------------------------------------- |
| `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | If true, the position won't be animated. |
| `pearlChainVerticalItemAttributes` | `pearl-chain-vertical-item-attributes` | public | `PearlChainVerticalItemAttributes` | | The pearlChainVerticalItemAttributes Prop for styling the bullets and line. |
| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | If true, the position won't be animated. |
| `pearlChainVerticalItemAttributes` | `pearl-chain-vertical-item-attributes` | public | `PearlChainVerticalItemAttributes` | `null!` | The pearlChainVerticalItemAttributes Prop for styling the bullets and line. |

## Slots

Expand Down
Loading

0 comments on commit e61bca5

Please sign in to comment.