📂Folder structure

The `_petal_framework` folder

Petal Pro files that devs can ignore

Anything related to Petal Pro that developers shouldn't need to modify are put in a separate folder called _petal_framework (we didn't name it _petal_pro because our project renaming script would overwrite the module names).

There is also another folder like this for our generator templates:

Petal Pro template files (eg. mix petal.gen.live)

For upgrading purposes, we recommend never modifying files in these folders directly.

How do I modify Petal Pro components?

Simply duplicate them into your own namespace. For example, you might want to modify our email components to jazz them up a bit:

You will then need to rename the module, eg. from PetalFramework.Components.EmailComponents to YourApp.Components.EmailComponents.

Then do a global search for where you import or alias that component. eg if I search for PetalFramework.Components.EmailComponents I see it here:

defmodule PetalProWeb.EmailView do
  use PetalProWeb, :view
  alias PetalFramework.Components.EmailComponents
end

I just need to change that alias to my new duplicated component:

defmodule PetalProWeb.EmailView do
  use PetalProWeb, :view
  alias YourApp.Components.EmailComponents
end

Now you can modify the component to however you want.