[App Extensibility ⚙️] Solve IDE wildcard import resolution (@W-16825282@)

[adamraya]

Description

The IDEs are unable to resolve the wildcard imports correctly and provide the proper navigation and IntelliSense.

This results in errors with red squiggly lines below the wildcard import syntax.

Example

import withRedBorder from '*/components/with-red-border'

Error

TS2307: Cannot find module '*/components/with-red-border'.

The PR implements two changes:

1. Replace the wildcard import symbol * with the dollar $ symbol to comply with the ts compilerOptions.path pattern limitation of using at most one '*' character. See ts config wildcard substitutions docs.
2. Adds a tsconfig.json file with the compilerOption.path mapping path starting with $/* to src/*.

{
    "compilerOptions": {
        ...
        "paths": {
            "$/*": [
                "src/*",
            ]
        },

Types of Changes

• [ ] Bug fix (non-breaking change that fixes an issue)
• [ ] New feature (non-breaking change that adds functionality)
• [ ] Documentation update
• [ ] Breaking change (could cause existing functionality to not work as expected)
• [ ] Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• Replace the wildcard import symbol * with the dollar $.
• Adds a tsconfig.json file.

How to Test-Drive This PR

• Checkout this branch solve-wildcard-imports in your IDE.
• Open the packages/extension-base/src/setup-app.ts file.
• Verify:
  1. There are no red squiggly lines below the dollar imports.
  2. The IDE navigates to the expected file when clicking (Cmd+ Click) on the dollar import.

Checklists

General

• [ ] Changes are covered by test cases
• [ ] CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• [ ] There are no changes to UI

or...

• [ ] Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• [ ] Changes comply with WCAG 2.0 guidelines levels A and AA
• [ ] Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• [ ] Changes include a UI text update in the Retail React App (which requires translation)