/AthenaJS

Rapid development of react components in isolation

Primary LanguageTypeScriptMIT LicenseMIT

AthenaJS Logo

MIT License


React    Electron.js    Vite


TypeScript    SASS    HTML5

Join us on Discord


FeaturesQuestionsContributingRead MoreThe Team


What is AthenaJS?

AthenaJS is a component visualizer workshop that allows developers to quickly develop and edit their React components in isolation without codebase integration.

Easy to use: AthenaJS is a standalone electron application that allows developers to import their own React components or create components from scratch within the application's code editor.

Dynamic: Developers can mock HTTP requests, style, and change the functionality of their components within the application's code editors. Changes are reflected in the renderer with the press of a button!

UI Mode: After developers have created/edited their react components, they can navigate to the UI Mode section and prototype UIs using components from their library.


Documentation & Installation

You can find documentation and download the app on our website

If you just want to download the app, you can find it under "Releases" on the right-hand side of GitHub!

Mac users: The application needs to be approved in the "Security and Privacy" tab before it can be run.


Features

Interested in what you can do with AthenaJS? Here is a quick summary of all the great features you can start developing with!

Please note AthenaJS only works for functional components, but work is currently being done to add support for class components!

Developing a Component from Scratch

Screen.Recording.2023-04-10.at.11.55.13.AM.mov

💠 You can develop components from scratch and export them to your React project using our code editors! The JSX editor holds the return statement of the component and the body contains everything else (your hooks, functions, etc.). Press update view to view your changes live in the component renderer. Save your progress by choosing a name for your component and saving it to the component library.

Upload and Edit Components

Screen.Recording.2023-04-10.at.12.09.08.PM.mov

💠 If you already have components built for your project and want to edit them, open the file explorer and import any of your React components! Our parser will inject your code into the editors so you can get started easily. Simply define any props your component relies on in the body editor and update the view to get your component working in the app!

Fetch Mock Integration

Screen.Recording.2023-04-10.at.12.13.14.PM.mov

💠 If your component makes an http request with fetch, AthenaJS includes feck-motch integration to mock the response. If you are interested in all of the great features available to you with feck-motch, check out the documentation . By default, our settings intercept all requests and respond with an object {data: 'mock data'} to get you started quickly.

Styling Your Components

Screen.Recording.2023-04-10.at.12.15.18.PM.mov

💠 AthenaJS includes styled-components integration, check out the documentation here to get started. Styled components lets you write actual CSS code to style your components, so you can get started quick and easy! Declare your styled component variable in the body editor and write CSS or copy over code from your CSS file to quickly style your component!

Compare Component Render Times

Screen.Recording.2023-04-10.at.12.16.52.PM.mov

💠 Curious which components are causing or have the potential to cause a bottleneck in your application? Every time you render a new component, the render time is captured using the React Profiler API, the same API that React Dev Tools are built on. Render times can be added to a bar graph with the click of a button to easily compare render times across different components.

Save Components

Screen.Recording.2023-04-10.at.12.25.57.PM.mov

💠 Press 'Save Library' to save your component library to your home directory. Your components will be persisted between sessions, so you can easily pick up from where you left off. Render any of your components and make changes to them, delete them from your library, or export them as a jsx file to easily integrate the components you develop into your React projects.

UI Whiteboard

Screen.Recording.2023-04-10.at.12.29.10.PM.mov

💠 Once you build a component library, you can easily prototype UIs using the drag and drop UI whiteboard. The whiteboard area can be saved as a screenshot to your downloads folder by pressing the screenshot button on the top right portion of the screen.

💠 One of the team's favorite uses of this tool is to compare similar components. Not sure which navbar or button you like best? Add them to the whiteboard and compare them side-by-side!


Questions and Support

If you have any questions or need help with the project, please don't hesitate to ask! You can reach out to us on Discord or create an issue on this repo.


Contributing

Navigate to the CONTRIBUTING.md file to learn how you can contribute to AthenaJS!


Read More

Check out our Medium article to read more!


The Team

AthenaJS Core Team

Developed By Github LinkedIn
Christopher Long Github LinkedIn
Daniel Chang Github LinkedIn
Derrick Oh Github LinkedIn
Matthew Fukudome Github LinkedIn
Ryan Motamen Github LinkedIn

Special thanks to our friend Michelle for the logo and icon design!

How is the repo structured?

The Athena JS repo is managed as a monorepo check out the CONTRIBUTING.md for development and check here for the doc website.


License

Athena is MIT licensed.