feat(list): add custom list component

[jackall3n]

Changes

• Add custom list component. Allows for more control than the ink-select-input like spacers, back buttons and footer descriptions
• Rolled out to Main Menu, Install menu, and Line Selector

[sirmalloc]

Looks great. The only small regression I see is when bunx isn't installed, the behavior is now different:

Previously, it was grayed and unselectable, now it's selectable, but does nothing when you press enter on it. Might make sense to make a prop on ListItemType to mark an item as disabled, and apply a gray color to it and automatically make it unselectable.

Only other suggestion would be possibly exploring the way we pass in the label. If the only reason we are supporting a React component vs a string in the label is to satisfy the dimColor text next to the primary text, then maybe we'd be better served simplifying it and just adding a sublabel, assuming all the places we do this are rendered the same way. It'll make blocks like this much more concise:

    const lineItems = localLines.map((line, index) => ({
        label: ({ isSelected }: { isSelected: boolean }) => {
            const suffix = line.length
                ? pluralize('widget', line.length, true)
                : 'empty';

            const title = `☰ Line ${index + 1}`;
            const description = ` (${suffix})`;

            return (
                <Text>
                    <Text>
                        {title}
                    </Text>
                    <Text dimColor={!isSelected}>{description}</Text>
                </Text>
            );
        },
        value: index
    }));

if we can just pass label: X, sublabel: Y, value: Z versus a full react component.

Other than that - I love the way you did this. It'll be nice to rip out all the existing menu logic bit by bit and transition to this, much cleaner.

[jackall3n]

Looks great. The only small regression I see is when bunx isn't installed, the behavior is now different:

Previously, it was grayed and unselectable, now it's selectable, but does nothing when you press enter on it. Might make sense to make a prop on ListItemType to mark an item as disabled, and apply a gray color to it and automatically make it unselectable.

Only other suggestion would be possibly exploring the way we pass in the label. If the only reason we are supporting a React component vs a string in the label is to satisfy the dimColor text next to the primary text, then maybe we'd be better served simplifying it and just adding a sublabel, assuming all the places we do this are rendered the same way. It'll make blocks like this much more concise:

    const lineItems = localLines.map((line, index) => ({
        label: ({ isSelected }: { isSelected: boolean }) => {
            const suffix = line.length
                ? pluralize('widget', line.length, true)
                : 'empty';

            const title = `☰ Line ${index + 1}`;
            const description = ` (${suffix})`;

            return (
                <Text>
                    <Text>
                        {title}
                    </Text>
                    <Text dimColor={!isSelected}>{description}</Text>
                </Text>
            );
        },
        value: index
    }));

if we can just pass label: X, sublabel: Y, value: Z versus a full react component.

Other than that - I love the way you did this. It'll be nice to rip out all the existing menu logic bit by bit and transition to this, much cleaner.

Makes sense! Happy to make these changes

[sirmalloc]

Awesome, will try to get these merged in soon. Appreciate it!