Changelog

Fields with the required attr set to true will now show an asterisk.

<.field type="text" required ... />
<.field type="select" ... />

View the docs.

This version we’ve focused on a few key features:

• <.image_upload> component for uploading single images like avatars. Used in user settings
• Local, Cloudinary and S3 support for <.image_upload>
• User Impersonation

<.image_upload> component

You can now implement user avatars and store them locally or on S3/Cloudinary (cloudinary.com). We recommend using Cloudinary as your storage service as it allows you to resize/modify images simply by altering the URL. This means you don’t need to use a tool like ImageMagick to resize/crop/compress your images

User impersonation

Admins can login as any user without knowing their password - available via the Admin console (under the User menu).

What’s changed?

• All forms now use the new FormField structure
• <.public_layout> has been moved into public.html.heex (it’s likely you’ll want to modify this to your brand and hence a component doesn’t make sense)

What’s fixed?

• Reset password page now accessible when logged in (previously would redirect)

For a quick overview on upgrading from a previous version, please refer to this guide.

What’s next?

• Stripe membership functionality
• JSON API
• Admin dashboard with graphs/stats
• Feature Requests

If you have any feature requests for an upcoming release, please create one on our roadmap.

View the docs.

You can now implement user avatars and store them locally or on S3/Cloudinary (cloudinary.com). We recommend using Cloudinary as your storage service as it allows you to resize/modify images simply by altering the URL. This means you don’t need to use a tool like ImageMagick to resize/crop/compress your images.

View the docs.

Admins can login as any user without knowing their password - available via the Admin console (under the User menu).

View the docs.

The Light color is unique in that it is designed to subtly adapt to dark mode.

<.button color="light" label="Light" />

View the docs.

Added docs for the Petal Framework tooltip solution. This uses Tippy.js via a hook.

<.button
  label="Has tooltip"
  data-tippy-content="Here is the tooltip"
  phx-hook="TippyHook"
  id="button_tooltip_example"
/>

View the docs.

A dynamic, stylish and feature-rich combo-box as a HEEX component..

<.form for={@form} phx-submit="on_submit">
  <.combo_box
    label="Pick your favourite fruit"
    multiple
    create
    placeholder="Select an option.."
    options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
    field={@form[:favourite_fruit]}
    help_text="Or add your own!"
  />
</.form>

View the docs.

In Phoenix 1.7, forms were given a new data structure to optimize live view forms. We created a new <.field> component that uses this new structure.

<.form for={@form} phx-submit="on_submit">
  <.field field={@form[:title]} />

  <.field
    field={@form[:state]}
    type="select"
    options={[{"Draft", "draft"}, {"Published", "published"}]}
  />

  <.button type="submit" label="Submit" />
</.form>

View the docs.

We’ve added a new option to the <.icon_button> component to allow you to add a tooltip.

<.icon_button tooltip="Clock" size="xs">
  <Heroicons.clock solid />
</.icon_button>

View the docs.

Petal Pro v1.5.2 has just dropped 🎉. This version we’ve focused on migrating common components and functionality into a separate library called “Petal Framework”.

This will mean no more _petal_framework folders all over the place. It also means if we modify a component, you can pull in the changes easily.

It is a private package so you will need to set up your local hex to know where to find our private package. Check out the install guide for the command (it has your unique license key in it).

What’s changed in 1.5.2?

• Uses the petal_framework private package (deletes all the _petal_framework folders). This will allow for an easier upgrade - process in the future, especially for components like the data table.
• Data Table supports base_url_params. Keep custom query params when changing sort order.
• Data Table is now self contained in the live view - code isn’t scattered across the model and context.
• Added mix recode for code linting and refactoring
• Use <.flash_group> to show flash messages (Petal Framework 0.3.0)
• Enabled Wallaby tests by default (mix test)
• Updated Tailwind to 3.3
• Updated Erlang to 25.3
• Added rename_project lib to replace custom mix task
• Data table API has changed slightly. See our docs https://petal.build/components/data-table on how to use
• Fixed Data table going blank when changing page size
• Fixed Navigation problems for the Data Table when setting the default_limit via a schema file
• Fixed Finch issue with email sending

How to buy

If you’re not a member already, you can purchase it here.

Prices: $299 USD for a single project $749 USD for unlimited projects $1999 USD for a team (unlimited projects) This gets you a years worth of upgrades. We subscribe you by default, but you can opt out at any time and keep your years worth of updates.

If you buy it and realise it isn’t for you, you can reach out to us for a refund within 7 days of purchase.

How to download

1. Edit your project to be the latest Petal Pro version
2. Click “Show” and you’ll see the download button.

…and the best news is that it now supports configurability! Hooray 🎉

Watch the demo video on this link or click the image below to see just how easy it is to change styles.

Can’t wait to see what cool new styles you come up with and be sure to share them with us!

Links 🔗

Petal Boilerplate project

https://github.com/PetalFramework/petal_boilerplate

Petal Components docs:

https://petal.build/components

Referencing styles:

https://github.com/PetalFramework/petal_components/blob/main/assets/default.css

VScode Snippets

Extension:

https://marketplace.visualstudio.com/items?itemName=PetalFramework.vscode-petal-components-snippets

Cheatsheet:

https://petal.build/components/snippets

Component Requests

If you have any component requests, please create an issue on the Petal Components github repo.

Contributing

If you’d like to help out we’ve got a Phoenix umbrella app that allows you to easily contribute to Petal Components (which is installed as a git submodule). If you create a new component then feel free to submit a PR. Ideally one from the roadmap but we’re open to any new components that would benefit others!

To download the new version you’ll need to create a new project or upgrade your existing project like in the gif below.

The big upgrade with 1.5.0 is the implementation of Phoenix 1.7 which has a number of distinct advantages you can read more about here.

How to download

We have a new layout - we hope you like it! We spent a lot of time fussing over it and have streamlined the experience to hopefully make it easier to manage projects and upgrades to new versions.

In the projects section under Petal Pro in the side menu, you’ll need to create a new project (if you haven’t already) or edit your existing project.

If creating a new project, it should automatically select 1.5.0 as the newest version, but to update your project from a previous version to 1.5.0, you’ll need to click Edit and change the version number from 1.x.x to 1.5.0 and hit save. Now you should be able to download 1.5.0.

What’s changed?

• Upgraded Phoenix to 1.7
• Routes use the new verified routes
• Authentication pages converted to live views
• Upgraded fully from Hericons v1 to v2
• petal.gen.live now uses the Data Table component
• Tesla now uses the more secure Finch over Hackney
• Confirmation page will redirect to org invitations if invitation exists
• Removed Petal Enhance (it was more complex than we thought). We will write a separate blog on the reasoning behind this shortly.

What’s fixed?

• Redirect to /app/orgs if an invalid org slug is used
• When editing user via /admin/users - patch_back_to_index no longer crashes
• Always show Data Table filters

For a quick overview on upgrading from a previous version, please refer to this guide..

We are putting the final touches on Petal Pro with Phoenix 1.7. Petal Enhance will also be significantly improved and will work with ordinary Phoenix projects as well as Petal Pro.

The major bit of news this month is that we soft-launched Petal Enhance!

We’ll have some recipes available for free for both Petal Boilerplate and Petal Pro users so that everyone can benefit from this incredible tool. We know some of you have been checking it out already and we really think this is going to be a game-changer as it gives us the opportunity to build out a market place of functionality that can be pulled into any project without polluting the Petal Pro codebase. You can read more in depth about Petal Enhance and how it works on our blog.

Initially, four recipes will be available for free:

• NPM package manager - app.js can import NPM packages. They will be stored in assets/node_modules.
• UUID - Use UUIDs instead of sequential integers for IDs (all tables). Modifies migration files.
• User first name & last name - Change user.name to user.first_name and user.last_name. Modifies migration files.
• Remove orgs - Petal Pro 1.4 comes with orgs functionality. Sometimes you may not need this.

We’re excited to announce that we’ve upgraded Petal Pro to the new Declarative Assigns and boy does it look pretty! 🚀

We’ve also upgraded Heroicons to v2, however you can still use the old Heroicons by appending “V1”.

<HeroiconsV1.Solid.clock />

We’ve implemented LiveView 0.18, which is a pretty huge and exciting update!! 🚀

You can read all about the update here

Essentially the main features are:

• Declarative Assigns and Slots
• HEEx HTML Formatter
• Accessibility
• JS commands and hooks in dead views

We’re super excited to have implemented LiveView 0.18 into Petal Pro and can’t wait to see what this enables once Phoenix 1.7 is released.

Some handly little updates this month! 🎉

Local time hook ⏰

Allows UTC dates and times to be shown in the user’s local timezone (using Javascript). Supports “time_ago” formatting (eg. “in 1 month”).

Use Docker for a local Postgres 🐳

If your system doesn’t have Postgres you can use docker-compose to run it in a container (saves you having to install it).

New recipe: NPM 👨‍🍳

We understand that some people need to use third-party Javascript libraries and prefer to use NPM to manage them over CDNs. This recipe will get you up and running with NPM quickly.

You can watch the video of all updates here.

New components: Data Table & Route Tree 🧪

The route tree shows all of your routes in a simple format. You can also copy the route helper by clicking a row.

The data table gives you a table view with sorting, filtering and pagination built in. The state is stored in the URL params.

Streamlined router

The router was a bit overwhelming so I’ve cut it down to just 92 lines. I split out some of the routes that don’t change as much into their own files (eg. auth, dev, auth routes).

Improved quality standards

I’ve added a new command mix quality. This runs three tasks:

• mix coveralls to report your test coverage
• mix credo to analyse your code and look for common problems
• mix sobelow to look for potential security issues in your code

Ideally before you push your code you should run this command (along with mix format).

Content Security Policy

mix sobelow revealed to me that no Content Security Policy was being set by Phoenix. It is generally favourable to have these set to prevent XSS attacks.

You will see this in the router:

plug(:put_secure_browser_headers, %{
"content-security-policy" =>
ContentSecurityPolicy.serialize(
struct(ContentSecurityPolicy.Policy, PetalPro.config(:content_security_policy))
)
})

Basically, in your config you need to whitelist any website you download assets from.

config :petal_pro, :content_security_policy, %{
default_src: [
"'unsafe-inline'",
"'unsafe-eval'",
"'self'",
"https://cdnjs.cloudflare.com",
"https://cdn.skypack.dev",
"https://rsms.me",
"https://res.cloudinary.com/"
]
}

Unfortunately Alpine JS needs “unsafe-eval” to work. Because of this I have a goal to eventually remove Alpine JS altogether. The A in PETAL will have to represent “and”. Or maybe “Ash” if we end up implementing their framework.

New JS hook helpers

• Dead view compatible hooks

Sometimes you want hooks to run in dead views. For example, I may want to run my tooltip library “tippy” on the landing page, which is dead (not a live view). Normally hooks can only run in a live environment, however I made a small change in app.js to run dead view compatible hooks when the page loads. This is great for small hooks that don’t communicate with a live view and just do some DOM manipulations.

import loadExternalFile from "../lib/load-external-file";

const TippyHook = {
deadViewCompatible: true,
mounted() {
this.run(this.el);
},
updated() {
this.run(this.el);
},
run(el) {
loadExternalFile([
"https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.umd.min.js",
]).then(() => {
tippy(el);
});
},
};

export default TippyHook;

• Dynamically load external libraries

As you can see in the “tippy” hook code above, I run a function loadExternalFile that takes an array of URLs. This will fetch the files, but cache them so they only get fetched once. Even if you have 100 tooltips on one page, these external files will only get loaded once.

This is great because we can now easily plug in any NPM library and start using it without a build system.

Using a build system (ESBuild) and creating a package.js file to host 3rd party libraries to me is less favourable. I like not having Node as a dependency - your web app is easier to install and just feels lighter.

• Oban jobs table

Next up we have an Oban jobs table. This simply is a simple version of Oban Pro. You can see your jobs and retry or cancel jobs.

Petal Pro v1.2.0 is now available to download for our subscribed members 👏

Social logins (Oauth2 SSO)

We’ve included Google & Github to get you started and make it super easy for you to enable login with any other OAuth provider you might want add to your app.

We’ve also included our very first Petal Pro component <.social_button> that produces beautiful social login buttons in two variants (“solid” and “outline”). Social button currently supports:

• Google
• Github
• Facebook
• Twitter
• Apple
• Linkedin

Passwordless auth

Users of your app can now register/sign in via a pin code sent to their email. It’s simple to enable or disable at any time.

Multi-tenancy

You can now optionally create an organization, invite & manage members, and more.

User lifecycle actions Run code after actions like register, sign_in, sign_out, password_reset, etc

New generator mix petal.gen.html (same args as phx.gen.html)

New component <.markdown content=””> & <.pretty_markdown content=””> (uses Tailwind Typography plugin)

Added License and Privacy pages Includes some content from a template to get you started

New layout <.layout type=”public”> For public marketing related pages like landing, about us, privacy, etc

Hooks can now be run in dead views if compatible (see color-scheme-hook.js as an example)

For a quick overview on upgrading from v1.1.0, please refer to this guide.