Runtime Error: Card importing Image instead of ImageProps interface

[RJSonnenberg]

Describe the bug When importing react-bulma-components in a React + TypeScript project with skipLibCheck set to false in the tsconfig.json project file, the project fails to compile. Below is the output after running npm start in the console:

Compiling...
Files successfully emitted, waiting for typecheck results...
Failed to compile.

C:/Code/FunRepo/React/bugtest/rbc-bug-report/node_modules/react-bulma-components/src/components/card/index.d.ts
TypeScript error in C:/Code/FunRepo/React/bugtest/rbc-bug-report/node_modules/react-bulma-components/src/components/card/index.d.ts(5,25):
'ImageProps' refers to a value, but is being used as a type here. Did you mean 'typeof ImageProps'?  TS2749

    3 |
    4 | declare const Card: BulmaComponent<{}, 'div'> & {
  > 5 |   Image: BulmaComponent<ImageProps, 'figure'>;
      |                         ^
    6 |   Content: BulmaComponent<{}, 'div'>;
    7 |   Header: BulmaComponent<{}, 'div'> & {
    8 |     Title: BulmaComponent<{}, 'div'>;

To Reproduce Steps to reproduce the behavior:

1. Create a React + TypeScript project: npx create-react-app rbc-bug-report --template typescript
2. Add Bulma and Bulma React Components to the project: npm install bulma bulma-react-components
3. Open tsconfig.json in the project root directory and set skipLibCheck to false
4. Open index.tsx in the project src directory and add import {} from 'react-bulma-components'; to the list of imports
5. Start the app: npm start
6. You will see the previously-mentioned error message at this point.

Expected behavior The application should compile without error when importing react-bulma-components.

Versions

• react-bulma-components:: 4.0.7
• bulma: 0.9.3
• react: 17.0.2
• @types/react: 17.0.9
• typescript: 4.3.5
• Browser: Firefox version 90.0.2; Microsoft Edge version 92.0.902.67; Google Chrome 92.0.4515.131;

Additional context I originally noticed this error in the .NET React Web App template.

Proposed Solution The ImageProps type needs to be exported: https://github.com/couds/react-bulma-components/blob/7d4d0f56979421957d26b6dc240adbf667f3d492/src/components/image/index.d.ts#L3 New:

export interface ImageProps {

We need to explicitly import the ImageProps type: https://github.com/couds/react-bulma-components/blob/7d4d0f56979421957d26b6dc240adbf667f3d492/src/components/card/index.d.ts#L2 New:

import { ImageProps } from '../image';

[RJSonnenberg]

This PR appears to be a different resolution from the proposed solution: https://github.com/couds/react-bulma-components/pull/360

The proposed solution is in this PR: https://github.com/couds/react-bulma-components/pull/364

[kennethnym]

Grouped to #362, closing