aws-amplify / aws-amplify/amplify-studio

Naming a Figma component "icon" causes codegen issues

Open
#975 0 comments 0 reactions 0 assignees View on GitHub
bug studio-ui ui-components
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.

![Screen Shot 2023-06-13 at 3 43 12 PM](https://github.com/aws-amplify/amplify-studio/assets/16825996/8b2877cd-b842-40a8-ae8d-6194e58b7f34)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.