Args: Update ArgType type definition

[PavelVanecek]

What I did

Updated ArgTypes typescript definition to reflect what is documented in https://storybook.js.org/docs/react/api/arg-types

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests
• typescript types

Manual testing

... I am embarassed to admit I couldn't figure out how to run typescript check on my computer. I'm hoping there's a CI pipeline.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

[cdedreuille]

Love that.

[ndelangen]

Hello @PavelVanecek Looks like this is causing a TS type issue:

src/blocks/ArgsTable.tsx(191,7): error TS2322: Type '{ [x: string]: PureArgsTableProps | { rows: StrictArgTypes<Args>; sort: SortType; }; }' is not assignable to type 'Record<string, ArgsTableProps>'.
         'string' index signatures are incompatible.
           Type 'ArgsTableProps | { rows: StrictArgTypes<Args>; sort: SortType; }' is not assignable to type 'ArgsTableProps'.
             Type '{ rows: StrictArgTypes<Args>; sort: SortType; }' is not assignable to type 'ArgsTableProps'.
               Type '{ rows: StrictArgTypes<Args>; sort: SortType; }' is not assignable to type 'ArgsTableOptionProps & ArgsTableDataProps'.
                 Type '{ rows: StrictArgTypes<Args>; sort: SortType; }' is not assignable to type 'ArgsTableDataProps'.
                   Types of property 'rows' are incompatible.
                     Type 'StrictArgTypes<Args>' is not assignable to type 'ArgTypes'.
                       'string' index signatures are incompatible.
                         Type 'StrictInputType' is not assignable to type 'ArgType'.
                           Property 'defaultValue' is optional in type 'StrictInputType' but required in type 'ArgType'.
       src/blocks/ArgsTable.tsx(200,7): error TS2322: Type '{ [x: string]: PureArgsTableProps | { rows: StrictArgTypes<Args>; sort: SortType; }; }' is not assignable to type 'Record<string, ArgsTableProps>'.
       src/blocks/ArgsTable.tsx(212,27): error TS2322: Type '{ [x: string]: PureArgsTableProps | { rows: StrictArgTypes<Args>; sort: SortType; }; }' is not assignable to type 'Record<string, ArgsTableProps>'.
       src/blocks/ArgsTable.tsx(255,13): error TS2322: Type '{ sort: any; error: any; } | { sort: any; rows: StrictArgTypes<Args>; }' is not assignable to type 'IntrinsicAttributes & ArgsTableProps'.
         Type '{ sort: any; rows: StrictArgTypes<Args>; }' is not assignable to type 'IntrinsicAttributes & ArgsTableProps'.
           Type '{ sort: any; rows: StrictArgTypes<Args>; }' is not assignable to type 'ArgsTableDataProps'.
             Types of property 'rows' are incompatible.
               Type 'StrictArgTypes<Args>' is not assignable to type 'ArgTypes'.

Is this something you can take a look at?

[PavelVanecek]

I will have a look

[PavelVanecek]

I can't bootstrap the repository on my local anymore :/ I'm getting a wall of text when running yarn start, and the typescript command doesn't finish either. Same on next branch without my changes. I suppose I will wait a few days and see if a fix is in progress already.

[PavelVanecek]

Trying again! I pull branch, and run this:

nvm use
corepack enable
yarn start

I get back tons of errors (I only included what I think is relevant):

✘ [ERROR] Could not resolve "@vitest/utils/error"

    src/instrumenter.ts:14:29:
      14 │ import { processError } from '@vitest/utils/error';
         ╵                              ~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@vitest/utils/error" as external to exclude it from the bundle, which will remove this error.

ESM Build failed
Error: Build failed with 1 error:
src/instrumenter.ts:14:29: ERROR: Could not resolve "@vitest/utils/error"

and:

✘ [ERROR] Could not resolve "@radix-ui/react-scroll-area"

    src/components/ScrollArea/ScrollArea.tsx:4:37:
      4 │ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
        ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@radix-ui/react-scroll-area" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "@radix-ui/react-scroll-area"

    src/components/ScrollArea/ScrollArea.tsx:4:37:
      4 │ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
        ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@radix-ui/react-scroll-area" as external to exclude it from the bundle, which will remove this error.

ESM Build failed
Error: Build failed with 1 error:
src/components/ScrollArea/ScrollArea.tsx:4:37: ERROR: Could not resolve "@radix-ui/react-scroll-area"

I can see this in both my branch, and next, so based on that I don't think it's something my changes introduced.

[PavelVanecek]

Okay I deleted every node_modules folder that I could find and the error went away! Next, how do I reproduce the typescript error...

[PavelVanecek]

So I tried running:

yarn task and then navigate to "checks" ... green

cd code && yarn lint:js ... green

then I found this one in circleCI failed build:

yarn task --task compile --start-from=auto --no-link --debug ... green

When I open the ArgsTable.tsx file in my VSCode I get 23 errors, most of which are "cannot find declaration file" and none are what I see in the CI run

Edit: AHA the secret was to start from somewhere else:

yarn task --task compile --start-from=install --no-link --debug

now I'm seeing typescript errors

[cdedreuille]

Any updates on this one @PavelVanecek ?