No controls for extended props type

[d9k]

Thank, very helpful & cool solution!

Discovered some inconsistent behavior if I declare component properties as type which is extended from another type:

import { useFela } from "react-fela";

import { ReactNode } from "react";

// Originally was imported from another file, inlined, error persists:
type WithChildren = {
  children?: ReactNode;
}

export type DemoFelaColorBlockProps = WithChildren & {
  borderColor?: string;
}

export const DemoFelaColorBlock = ({
  borderColor,
  children,
}: DemoFelaColorBlockProps) => {
    const { css } = useFela()
    // const css = (props:any) => '';

    return (
        <div className={css({
            /** @See [Fela shorthand expand with merge SSR · Issue #789 · robinweser/fela](https://github.com/robinweser/fela/issues/789)
             * Prop `className` did not match (client/server)
             * */
            // backgroundColor: '#ff5630',
            border: borderColor ? `1 px solid ${borderColor}` : undefined,
            background: '#ff5630',
            display: 'flex',
            padding: 4,
            paddingBottom: 20,
            marginBottom: 12,
            flexDirection: 'column',
            // invalidKey: 'invalidValue',
            ':hover': {
                background: 'green',
                foo: {
                    background: 'blue'
                }
              },
              'nested': {
                background: 'yellow'
              }
        })}>
            <h2>Fela colored block</h2>
            {children}
        </div>
    );
}

pnpm exec ladlescoop --stdout src/shared/ui/demoFelaColorBlock.tsx

Result: no .args lines in result story DemoFelaColorBlock.stories.tsx:

// . . . . .

DemoFelaColorBlockStory.argTypes = {

}

[d9k]

If change to type declaration without extend

// . . . . .

export type DemoFelaColorBlockProps = {
  borderColor?: string;
  children?: ReactNode;
}

// . . . . .

output would be:

// . . . . .

DemoFelaColorBlockStory.args = {
  borderColor: '',
}

DemoFelaColorBlockStory.argTypes = {

}

[d9k]

If change to interface declaration which extends type

// . . . . .

type WithChildren = {
  children?: ReactNode;
}

interface DemoFelaColorBlockProps extends WithChildren {
  borderColor?: string;
}

// . . . . .

output would be:

// . . . . .

DemoFelaColorBlockStory.args = {
  borderColor: '',
}

DemoFelaColorBlockStory.argTypes = {

}

[d9k]

Moreover, props from base type are not inherited:

// . . . . .

interface WithChildren {
  children?: ReactNode;
  someBaseProp: string;
}

interface DemoFelaColorBlockProps extends WithChildren {
  borderColor?: string;
}

// . . . . .

Output:

// . . . . .

DemoFelaColorBlockStory.args = {
  borderColor: '',
}

DemoFelaColorBlockStory.argTypes = {

}

[d9k]

Oh, I see, it's planned:

[TODO:](https://github.com/lukifer/ladlescoop#todo)
Recursive type imports and composable types

[d9k]

ts-morph may be useful

See my basic demo which lists inherited props declarations.