CONTRIBUTING.md

Contributing

Setup | File Structure | Iteration Roadmap

If you're reading this document, we're really excited that you want to contribute to the project! All work on AthenaJS happens directly on GitHub. If you would like to contribute, please send a pull request to the dev branch. The following guide has some useful information, so we highly recommend you take a look at it before getting started!

Code of Conduct

We expect contributors to adhere to our code of conduct. Please read the full text so that you can understand what actions are expected of contributors to the project.

Not sure where to start?

• You'll most likely need to read up on a few tools and libraries

  • React Live

    • Used to render components

  • React Flow

    • Enables the drag and drop UI prototyping tool with custom nodes

  • Styled Components

    • Styling components within the app is primarily done using the Styled Components Library

  • Fetch Mock

    • Used to set up a mock server

  • Parsing user uploaded files

    • ASTs (Abstract Syntax Tree):
      • We use Babel for parsing and traversing user uploaded files: the Babel AST spec is a bit different from ESTree.
      • Check out the Babel Plugin Handbook, in particular the parser, traverser, and best practices section
      • Check out AST Explorer to learn more about ASTs

  • testing with Jest

    • Mocking React Context

  • Helpful diagrams

    • Athena App Diagram (Excalidraw)

---

Setup

If you want to contribute to AthenaJS, the first step is to fork and clone the repository to your local machine. Once you've cloned it, navigate to the "electron-react" folder and run "npm run dev" to start up the application after installing the dependencies. This will allow you to begin making changes and testing your code.

git clone https://github.com/oslabs-beta/Athena.git
cd Athena/electron-react

Then you can run:

npm run dev

Which will spin up the application on your local machine. AthenaJS uses Vite for an enhanced development experience with really fast HMR. Any changes you make to the codebase on your local machine will be quickly reflected on your running instance of AthenaJS!

File Structure

• Electron React (Root Directory for AthenaJS Project)
  • Electron (Electron)
    • Main (Electron-main)
    • Preload (Pre-load scripts)
  • src (React)
    • Index.tsx (Hangs app off of root and wraps app in context providers)
    • App.tsx
    • Pages
      • UI Page
      • Workshop
    • Components
      • Components are grouped by category
        • Accompanying tests should be placed in a test folder next to the components they are unit testing
        • Files containing TypeScript Types used for components are located in the same category folder as the components

Iteration Roadmap

Not sure what contribution you want to make? Here are a few starting points:

1. Add unit tests with Jest. We are continually adding unit tests for components in order to enhance the quality and reliability of the codebase. - If you notice tests are missing for a component, we welcome additions to the testing ecosystem of AthenaJS! - If you make a pull request with a new component, consider adding an accompanying test file
2. Adding support for class components
3. Adding support for components written in TypeScript
4. Adding Tailwind CSS support for styling components

License

By contributing to AthenaJS, you agree that your contributions will be licensed under its MIT license.