aws-amplify / aws-amplify/amplify-studio
Naming a Figma component "icon" causes codegen issues
- Dominant language
- No language data
- Stars
- 135
- Forks
- 32
- PR merge metrics
- No merged PRs in 30d
Description
### Before opening, please confirm:
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-adminui/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-adminui/blob/main/CONTRIBUTING.md#bug-reports).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
- [X] I have removed any sensitive information from my code snippets and submission.
### App Id
na
### Region
na
### Environment name
na
### Figma File Version (if applicable)
na
### Amplify CLI Version
12.1.0
### If applicable, what version of Node.js are you using?
v16.19.0
### What operating system are you using?
mac
### Browser type?
chrome
### Describe the bug
Name a component in your figma file "icon." After running `amplify pull` this causes run time javascript errors.
In the image before the path to the Icon component is `./icon` but there is no module with that path. It should be "./Icon"
Icon is also a default export so it the export can't be aliased like this.

### Expected behavior
Components in Figma named "icon" should be title cased after importing to studio.
Running the codegen component in your project should not result in runtime errors.
### Reproduction steps
1. Name a component in your Figma file "icon"
2. Sync your components in Studio
3. amplify pull your components
4. Start your local development server in a project with ideally typescript.
5. Look at the runtime errors.
### Project Identifier
_No response_
### Additional information
_No response_
Contributor guide
Research direction
Reproduce the issue by naming a Figma component "icon", syncing it in Studio, running amplify pull, and starting the local development server in a TypeScript project. Trace the generated component imports and exports to find where the component name is handled; done means the generated code runs without runtime errors and the component is title cased as "Icon".
Written by the indexing model from the issue text.
Assessment
- Tech stack
- figma, javascript, typescript
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100