Changelog
May 21, 2023
Added a tooltip hook
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"
/>
May 9, 2023
Combobox
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>
May 4, 2023
Forms V2
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>
April 22, 2023
Added a tooltip option to IconButton
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>
April 21, 2023
Petal Pro 1.5.2 relase & Petal Framework is born
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
- Edit your project to be the latest Petal Pro version
- Click “Show” and you’ll see the download button.
February, 2023
Petal Components v1.0 is now available 🔥
…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!
February, 2023
Petal Pro 1.5 with Phoenix 1.7 released
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..
January, 2023
Coming soon - Petal Pro with Phoenix 1.7
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.
November, 2022
Petal Enhance
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.
October, 2022
Petal Pro
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 />
September, 2022
Petal Pro
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.
August, 2022
Petal Pro
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.
July, 2022
Petal Pro
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.
May, 2022
Petal Pro
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:
- Github
- Apple
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.