AlaskaAirlines / auro-avatar

Custom element for the purpose of displaying an avatar image.
https://auro.alaskaair.com/components/auro/avatar
Apache License 2.0
1 stars 0 forks source link

feat(react): add support for automated react wrapper #23 #24

Closed blackfalcon closed 2 years ago

blackfalcon commented 2 years ago

Changes to be committed: new file: custom-elements-manifest.config.mjs new file: custom-elements.json modified: package-lock.json modified: package.json new file: react/AuroAvatar.jsx

Alaska Airlines Pull Request

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Resolves: #23

Summary:

Please summarize the scope of the changes you have submitted, what the intent of the work is and anything that describes the before/after state of the project.

The scope of this PR is to support the concept of generating an automated element manifest supporting the automated generation of a React wrapper.

Type of change:

Please delete options that are not relevant.

Checklist:

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!
-- Auro Design System Team

blackfalcon commented 2 years ago

To test this, I used the React demo project created by @geoffrich and npm linked the project to the updated auro avatar project. When running the demo, I get the following error.

../avatar/react/AuroAvatar.jsx 56:9
Module parse failed: Unexpected token (56:9)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
|   }, [type]);
| 
>   return <auro-avatar ref={ref}>{children}</auro-avatar>;
| }
|