• Support for LiveView 1.0
• Rich content editor and blog/CMS feature
• Admin/User AI chat - use LangChain to interrogate Petal Pro
• Updated: Using latest Heroicons from Petal Components 2.0.6
• Updated: petal.gen.live uses Table instead of Data Table (and is based on streams). Use the --data-table option to generate templates using a Data Table
• Updated: Compatability increased for code generated by phx.gen.live and phx.gen.html
• Updated: Upgrades to gettext 0.26
• Fixed: Sticky class for stacked layout
• Fixed: Stacked layout renders sub-menu in mobile
• Fixed: User notifications marked as read based on socket url (previously only worked with conn request path)
• Fixed: Combobox has rounded corners after selection

Upgrade Notes

In Petal Components, the heroicons dependency has been replaced with an alternate CSS-based approach. This is based on what has been implemented in the Phoenix repo - the reasoning is explained in this issue. To upgrade an existing Petal Pro project, add the dependency in mix.exs:

# mix.exs

def deps do
  [
+    {:heroicons,
+      github: "tailwindlabs/heroicons",
+      tag: "v2.1.5",
+      app: false,
+      compile: false,
+      sparse: "optimized"},
  ]
end

This will download a copy of the source SVG files directly from GitHub (into deps/heroicons/optimized). Then the following code will process these files to create custom CSS classes:

# assets/tailwind.config.js

const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");
+ const fs = require("fs");
+ const path = require("path");

module.exports = {
  plugins: [
+    // Embeds Heroicons (https://heroicons.com) into your app.css bundle
+    // See your `CoreComponents.icon/1` for more information.
+    //
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"],
+        ["-micro", "/16/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          let size = theme("spacing.6")
+          if (name.endsWith("-mini")) {
+            size = theme("spacing.5")
+          } else if (name.endsWith("-micro")) {
+            size = theme("spacing.4")
+          }
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": size,
+            "height": size
+          }
+        }
+      }, {values})
+    })
  ],
};

• 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 with User.role. User role is an enum
• Integrate :typed_ecto_schema with Ecto.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.

• 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

• 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

Upgrade notes

• 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

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)

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

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)

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

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

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 of Application.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)