Changelog

…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.