Releases
Unreleased:
Released
Features:
Admin dashboard with graphs/stats
Admins usually want to see KPIs in a visual format - display charts using live view - components for displaying stats
Make all components accessible (a11y - WCAG-compliant)
As the title states, update all components to be accessibility friendly.
Persistent Notifications Management
In many apps, it is common to have persistent notifications for purposes like a new event/message, missing billing info, unpaid invoices, incomplete profile, etc. These notifications usually manifest themselves with a few features: (1) a notifications menu option with a superscript badge to show that there are unread/new notifications (2) a dropdown from the menu to show a list of notifications (3) archivable/dismissable notifications (4) A component for Flash-like messages with call-to-action buttons, e.g., for important pending tasks like providing billing info. (5) Some such notifications might be dismissable, others not.
Admin can see current users (using Phoenix Presence)
Show active users to admins by using Phoenix Presence (https://hexdocs.pm/phoenix/Phoenix.Presence.html).
Official Figma design kit
Any component we make will be added to the Figma design kit to allow easy screen design mockups.
- Petal Framework is merged into Petal Pro
- Npm packages recipe is merged in as default
- Graphs/stats dashboard in the Admin console
- See who’s currently active (via Presence) in the Admin console
- If user belongs to only one org, current org is automatically set
-
User.is_admin
is replaced withUser.role
. User role is an enum -
Integrate
:typed_ecto_schema
withEcto.Schema
fallback for users who have not installed it. - Orgs are added to log view
- Ecto insights tab is enabled in LiveDashboard
- Fixed: Edge case for Combo Box - Tom Select is re-generated when there is a change in option count
- Fixed: App does not crash when impersonating a user and the session has expired
- Fixed: Subscription logs weren’t working!
- Fixed: Race condition with subscription create/update when responding to Stripe web hooks
- Fixed: In docker compose, postgres container will not auto-restart if stopped
Upgrade Notes
Starting with this release, the Petal Framework is no longer referenced as an external package. If you have generated a Dockerfile for deployment, then you can remove the following section:
# Remove the Petal repo:
RUN --mount=type=secret,id=PETAL_LICENSE_KEY \
mix hex.repo add petal https://petal.build/repo \
--fetch-public-key "SHA256:6Ff7LeQCh4464psGV3w4a8WxReEwRl+xWmgtuHdHsjs" \
--auth-key $(cat /run/secrets/PETAL_LICENSE_KEY)
You may also need to add nodejs
and npm
:
# install build dependencies
RUN apt-get update -y && apt-get install -y build-essential git nodejs npm \
&& apt-get clean && rm -f /var/lib/apt/lists/*_*
Finally, lib/petal_pro_web/petal_framework_translations.ex
is no longer required. Components like the
DataTable can use Gettext directly.
Features:
JSON API
API Account tokens, Swagger / OpenAPI Specification
Make Sidebar Layout Collapse-able
Add a "hamburger" icon to sidebar layout so when you toggle it, the sidebar collapses to show only the menu icons, rather than the menu icon plus the textual description of the menu item. This way, the main content area can be wider if you have a lot of columns to display. Thanks!
- JSON API: You can use the Petal Pro API for user management (register, sign in and update). It comes with OpenAPI support out of the box. Includes Swagger UI
- Update: Can sync all Stripe subscriptions including cancelled ones
- Added expanded user and org admin pages
- Fixed: PetalProWeb.Controllers.UserAuth.disconnect_user_liveviews doesn’t disconnect the user’s live views #216
- Fixed: Passwordless sign in issue from latest Phoenix Live View fixed #222
- Update: Sidebar layout now collapsible
Features:
Stripe membership functionality
It would be great to have the ability to take membership payments from users/members out of the box. This would complete the experience from sign up to purchase.
- Stripe integration - can buy subscriptions and manage them - support for both individuals and orgs
- Use styler for code formatting
- Updated landing page components to a more modern look
- Use bandit instead of cowboy (4x faster)
- Lots of small changes
- Fix bug where users registering via passwordless / 3rd parties would not get invites to orgs
- Important passwordless security fix - anyone using passwordless should update
- Update deps
Features:
User Impersonation
Add the ability to "impersonate" another a user in the application as a super admin. (ex: (ex: https://github.com/ankane/pretender)) This would allow the developer to debug and trouble shoot production issues more easily.
Avatar/photo uploads with Cloudinary
Implement user avatars and store them on Cloudinary (cloudinary.com) - a storage service that 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.
LiveView file uploads - store in Amazon S3
Give an example of a file upload using LiveView and S3.
New
- <.image_upload> component for uploading single images like avatars. Used in user settings
- Local, Cloudinary and S3 support for <.image_upload>
- User impersonation - admins can login as any user without knowing their password - available via the Admin console (under the User menu).
Updated
- 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)
Fixed
- Reset password page now accessible when logged in (previously would redirect)
Removed
- Page builder (it was getting too complex to manage - let us know if you used this a lot and we’ll consider bringing it back)
Features:
A combobox component
A combination of a search and select input implemented in a live view. See https://tailwindui.com/components/application-ui/forms/comboboxes.
New
-
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)
Changes
-
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
Breaking
- 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
-
Navigation problems for the Data Table when setting the
default_limit
via a schema file - Fix Finch issue with email sending
New
- Develop Petal Pro in GitHub CodeSpaces!
- Data Table column - can now filter by a select list
- Data Table column - can now filter by a float
Changed
- topbar.js version updated to 2.0
- mix setup no longer fetches tailwind/esbuild if they already exist
- Upgrade Petal Components to 1.0
- Data Table is now a function component
Fixed
- Github auth working again
Features:
Upgrade to Phoenix 1.7
Upgrade Petal Pro to Phoenix 1.7
Convert all auth pages to live view
Convert sign up and register pages to live view.
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 (https://github.com/petalframework/petal_pro/issues/66)
- Confirmation page will redirect to org invitations if invitation exists (https://github.com/petalframework/petal_pro/issues/68)
- Removed Petal Enhance (it was more complex than we thought)
Fixes
-
Redirect to
/app/orgs
if an invalid org slug is used (https://github.com/petalframework/petal_pro/issues/70) -
When editing user via
/admin/users
-patch_back_to_index
no longer crashes (https://github.com/petalframework/petal_pro/issues/61) - Always show Data Table filters (https://github.com/petalframework/petal_pro/issues/60)
Features:
Set/show times in a users local time zone
Sortable Tables
A component that gives you a sortable, filterable and paginated table out of the box.
Improved upgrade process
Make it possible (if possible) to upgrade Petal versions more easily, then make the service a subscription, so we can continue to get the benefits in our apps. I know this would be hard, but as a solo developer, being able to leverage the improvements in Petal would be huge.
Added
- Updated to LiveView 0.18 + Petal Components 0.18
- All components updated with declarative assigns (attr / slot)
- Data table component
- Local time component
- Sobelow for security checking
- Coveralls for code test coverage
- test.yml Github action for code quality
- Easily modifiable content security policy to help prevent XSS
- Added a docker-compose.yaml that adds Postgres so you don’t need to install it
Changed
- Router significantly more streamlined
- Some routes have been moved into their own files: AdminRoutes, AuthRoutes, DevRoutes, MailblusterRoutes
- Users are forced to be confirmed to access /app routes (easily configurable)
- Use Ecto enums for org roles
Fixes
- Fix reset password failing when signed in
- Clean up dashboard_live.ex - some old code unused was left in there
- Improved SEO meta tags in _head.html.eex
- Show a warning in the logs when no title/meta_desciprion is set on a public page
-
Added
open-graph.png
(to be replaced by dev) - Fix require_confirmed_user plug
- Fix landing page GSAP not working
Features:
Support UUIDs
It's pretty easy to set up the app to use UUID by default for ids and foreign keys, however, there are places in the code that break, for example, HashId. I'm removing the HashId.encode/decodes but I'm not sure if that is "safe"? It'd be nice if the code supported UUID or ints in these places out of the box. What I've found so far: 1. HashId 2. Passing the ID into an Echo Query (user_id = user_id |> Ecto.UUID.dump!())
Add 2FA layer to the auth login flow
Add an optional 2FA layer (using nimble_totp?) to the auth login flow, so people can opt to use the 2FA app of their choice (Google Authenticator, Authy, LastPass, etc.).
Added
- Two-factor authentication using time-based one time passwords (paired with something like Google Authenticator)
Changed
- Decoupled DashboardLive from Orgs so you can get started quicker if you don’t want orgs
- Can pass a custom header class to the public layout
- Sidebar and stacked layouts now support grouped menu items (see dev_layout_component.ex for an example)
- Update Tailwind to 3.1
- Split CSS into different files thanks to Tailwind 3.1
Fixed
- Onboarding now remembers user_return_to
- Fixed nav dropdown bug after modal toggle
- Fixed gettext in live views
Features:
Oauth2 SSO social logins like Google / Facebook / Apple
Handy for easy sign up/log in
Add petal.gen.html generator
It would be great to add a petal.gen.html generator to generate controller, views, and context for an HTML resource using Petal Components. Petal Components can be used in regular HEEx templates and not everything should be a LiveView.
Multi-org schema: Org <- OrgsUsers -> Users
A common practice is to have a personal account but then also be a part of an organisation or company. - organisation schema - an org can have multiple users - a user can have an admin role in the org - org admins can invite more users, or remove them - an org can have a Stripe payment method
Passwordless auth
A user can register/sign in with just their email address - they get sent a 4 digit code to enter.
Added
- Login with Google & Github - easy to add more auth providers
- Passwordless auth - register/sign in via a code sent to your email
- Orgs - create an org, 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 (with 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)
Changed
-
Simpler config access (
PetalPro.config(:app_name)
instead ofApplication.get_env(:petal_pro, :app_name)
) - Refactor <.layout> to take less props
- Refactor dark/light mode system. Much simpler now and no longer needs cookies
- Put Petal Pro Components in their own folder for easier future upgrades (can duplicate if you want to modify them)
- Sidebar and stacked layout have a new slot for the top right corner (if you want to add something like a notifications bell)
Fixed
- Log metadata wasn’t being cast
- More user actions are logged
- Fixed petal.live generator tests
- Added tests for user settings live views
- Bump Oban version to stop random error showing
- Bump Petal Components
- Use new <.table> component in petal.gen.live generator & logs
- Dark mode persists on all pages with cookies
- Fix logo showing twice in emails
- Improved the Fly.io deploy flow
- Fix admin user search
- Remove guide (this is now online)
Features:
A Petal version of phx.gen.live
Same as phx.gen.live but the templates output uses Petal Pro's layouts and the form components from Petal Components
Allow instant deployments to Fly.io
Add a working dockerfile and ensure all the config is correct for fly.io deployments right off the bat
Make LiveView feel faster with a delayed loading indicator
As described in this blog article: https://fly.io/phoenix-files/make-your-liveview-feel-faster/
Install Oban
Make it easy to create background jobs with the state saved in your db
i18n
Use gettext in non-admin areas.