scania-digital-design-system / tegel

Tegel Design System
https://tegel.scania.com
MIT License
15 stars 12 forks source link

[Bug report]: Type definitions are missing in @scania/tegel-react #658

Closed lkritsimas closed 6 days ago

lkritsimas commented 1 month ago

Requirements before reporting

Package versions

@scania/tegel-react: >=1.9.0

Browser

Chrome

Framework

React

Version

React 18

Reproduction steps

Type definitions are missing in version 1.9.0 and above when using modern TypeScript moduleResolution options. Types for Tegels custom events are also no longer exported by @scania/tegel when using @scania/tegel-react.

  1. Create a new React project npm create vite@latest tegel-missing-types -- --template react-ts
  2. Install Tegel v1.8.1 npm i @scania/tegel-react@1.8.1
  3. Import any Tegel component in any React component, ex. TdsTextField (or use my code example)
  4. Try to autocomplete a TdsTextField property or hover over an existing property to see its type in your code editor
  5. Import a Tds...CustomEvent type from @scania/tegel ex. import { type TdsTextFieldCustomEvent } from '@scania/tegel';
  6. Verify that it works as it should. Yay!
  7. Install Tegel v1.10.0 npm i @scania/tegel-react@1.10.0
  8. Repeat steps 4 and 5
  9. Verify that type definitions are broken
  10. Verify that custom event types are no longer exported by @scania/tegel and are only available in @scania/tegel/loader

    Could not find a declaration file for module '@scania/tegel'. '/node_modules/.pnpm/@scania+tegel@1.10.0/node_modules/@scania/tegel/dist/index.js' implicitly has an 'any' type. There are types at '/node_modules/@scania/tegel/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@scania/tegel' library may need to update its package.json or typings.ts(7016)

  11. Oh no!

Code example

import { ReactNode } from 'react';
import { TdsDropdown } from '@scania/tegel-react';

const Example = (): ReactNode => {
  return (
    <div>
      <TdsDropdown
        onTdsChange={(event) => {
          console.log(event);
        }}
      />
      This is an amazing example! Wow!
    </div>
  );
};

export default Example;

Screenshots

v1.8.1 image

v1.10.0 image

Expected behaviour

Tegels type definitions should be available for the consuming application.

Solution

Update package.json in the @scania/tegel package and export all type definitions:

  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts"
    },

Console errors

No response

Contact information

No response

theJohnnyMe commented 6 days ago

Fix for this was released in version 1.11.0