While Petal Components provides a great design system for any Phoenix project, Petal Framework takes things one step further with advanced components that often require a lot of custom JavaScript and CSS to get right.

Due to the length of time it takes to develop and maintain, we have decided to make Petal Framework a paid package. This will allow us to continue to develop and maintain it for the long term.

Roadmap:

Translations

You can override the default messages by defining a module that implements the translate/1 function. For example:

# /lib/<your_app>_web/petal_framework_translations.ex

defmodule YourAppWeb.PetalFrameworkTranslations do
  import YourAppWeb.Gettext

  # You can omit any of the following functions if you don't want to override the default message.
  def translate("Showing"), do: gettext("Showing")
  def translate("to"), do: gettext("to")
  def translate("of"), do: gettext("of")
  def translate("rows"), do: gettext("rows")
  def translate("Equals"), do: gettext("Equals")
  def translate("Not equal"), do: gettext("Not equal")
  def translate("Search (case insensitive)"), do: gettext("Search (case insensitive)")
  def translate("Is empty"), do: gettext("Is empty")
  def translate("Not empty"), do: gettext("Not empty")
  def translate("Less than or equals"), do: gettext("Less than or equals")
  def translate("Less than"), do: gettext("Less than")
  def translate("Greater than or equals"), do: gettext("Greater than or equals")
  def translate("Greater than"), do: gettext("Greater than")
  def translate("Search in"), do: gettext("Search in")
  def translate("Contains"), do: gettext("Contains")
  def translate("Search (case sensitive)"), do: gettext("Search (case sensitive)")
  def translate("Search (case sensitive) (and)"), do: gettext("Search (case sensitive) (and)")
  def translate("Search (case sensitive) (or)"), do: gettext("Search (case sensitive) (or)")
  def translate("Search (case insensitive) (and)"), do: gettext("Search (case insensitive) (and)")
  def translate("Search (case insensitive) (or)"), do: gettext("Search (case insensitive) (or)")
end

Then in your config/config.exs file:

config :petal_framework, :translation_helper_module, YourAppWeb.PetalFrameworkTranslations

Deployment

Docker images

Building Docker images requires an additional step to add the private hex repo. Passing the fingerprint and password in as build arguments isn’t secure, and you should use buildkit’s secret support instead if possible.

Reference the secrets within in your Dockerfile by mounting it within a RUN command:

RUN --mount=type=secret,id=petal_public_key \
  --mount=type=secret,id=petal_license_key \
  mix hex.repo add petal https://petal.build/repo \
    --fetch-public-key "$(cat /run/secrets/petal_public_key)" \
    --auth-key "$(cat /run/secrets/petal_license_key)"

Then, at build time, pass the fingerprint and license through using the –secret flag:

docker build \
  --secret id=petal_public_key,env=PETAL_PUBLIC_KEY \
  --secret id=petal_license_key,env=PETAL_LICENSE_KEY .

Authorizing on Gigalixir

If your app runs on Gigalixir you can use a buildpack hook to authenticate with the private Petal repo.

First, set your license key on Gigalixir:

gigalixir config:set PETAL_LICENSE_KEY="please_sign_in_as_a_pro_member_to_view_your_api_token"
gigalixir config:set PETAL_PUBLIC_KEY="SHA256:6Ff7LeQCh4464psGV3w4a8WxReEwRl+xWmgtuHdHsjs"

Then add the hook to the end of your elixir_buildpack.config:

hook_pre_fetch_dependencies="mix hex.repo add petal https://petal.build/repo \
  --fetch-public-key ${PETAL_PUBLIC_KEY} \
  --auth-key ${PETAL_LICENSE_KEY}"

Authorizing on Heroku

If your app runs on Heroku using the Elixir Buildpack (rather than Docker) you’ll need to use compilation hook to authorize hex before fetching dependencies.

First, set your license key on Heroku:

heroku config:set PETAL_LICENSE_KEY="please_sign_in_as_a_pro_member_to_view_your_api_token"
heroku config:set PETAL_PUBLIC_KEY="SHA256:6Ff7LeQCh4464psGV3w4a8WxReEwRl+xWmgtuHdHsjs"

Next, add a small shell script to your application in ./bin/predeps:

#!/bin/bash

mix hex.repo add petal https://petal.build/repo \
    --fetch-public-key ${PETAL_PUBLIC_KEY} \
    --auth-key ${PETAL_LICENSE_KEY}

Make sure the prepdeps script is executable:

chmod +x ./bin/prepdeps

Finally, set the predeps script within elixir_buildpack.config:

hook_pre_fetch_dependencies="./bin/predeps"

Authorizing on Fly

Fly uses a Dockerfile to install your application. It also gives you the ability to set build secrets. Firstly, open up your Dockerfile and add this before the mix deps.get step:

RUN --mount=type=secret,id=PETAL_PUBLIC_KEY \
  --mount=type=secret,id=PETAL_LICENSE_KEY \
  mix hex.repo add petal https://petal.build/repo \
    --fetch-public-key "$(cat /run/secrets/PETAL_PUBLIC_KEY)" \
    --auth-key "$(cat /run/secrets/PETAL_LICENSE_KEY)"

We still need to pass in the secrets. From your local machine you can deploy like this:

fly deploy \
  --build-secret PETAL_PUBLIC_KEY=SHA256:6Ff7LeQCh4464psGV3w4a8WxReEwRl+xWmgtuHdHsjs \
  --build-secret PETAL_LICENSE_KEY=please_sign_in_as_a_pro_member_to_view_your_api_token

If you use GitHub Actions, you need to add the secrets.

PETAL_PUBLIC_KEY: SHA256:6Ff7LeQCh4464psGV3w4a8WxReEwRl+xWmgtuHdHsjs
PETAL_LICENSE_KEY: please_sign_in_as_a_pro_member_to_view_your_api_token

Then in your workflow:

jobs:
  deploy:
    name: Deploy app
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: superfly/flyctl-actions/setup-flyctl@master
      - run: |
        flyctl deploy --remote-only \
          --build-secret PETAL_LICENSE_KEY=${{ secrets.PETAL_LICENSE_KEY }} \
          --build-secret PETAL_PUBLIC_KEY=${{ secrets.PETAL_PUBLIC_KEY }}

Authenticating for CI

If you have a CI tool that pulls down dependencies as part of a build step, you will need to add a step before the mix deps.get.

# In your CI config add this step BEFORE your `mix deps.get` step:
- name: Authorize Petal
run: |
  mix hex.repo add petal https://petal.build//repo \
    --fetch-public-key ${{secrets.petal_public_key}} \
    --auth-key ${{secrets.petal_license_key}}

You will then need to add the following secrets to Github:

• Name: petal_public_key, Value: SHA256:6Ff7LeQCh4464psGV3w4a8WxReEwRl+xWmgtuHdHsjs
• Name: petal_license_key, Value: please_sign_in_as_a_pro_member_to_view_your_api_token

0.8.1 - 19 days ago

• Update sidebar logo wrapping div class so not to apply padding to the logo icon when collapsed (because it squishes larger logo images).
• Update logo icon wrapping anchor with mx-auto class to center it.

0.8.0 - 22 days ago

• Collapsible Sidebar: Address grouped menus items, fix width class not applying correctly
• Update deps

0.7.0 - 1 month ago

• Make SidebarLayout collapsable. Requires Alpine Persist plugin.

0.6.0 - 3 months ago

• Use PhoenixHTMLHelpers

0.5.2 - 3 months ago

• Fix bug where if the value of a combobox was updated after it was initially rendered, it wouldn’t update like other input/select fields do
• Update deps

0.5.1 - 6 months ago

• Add remote_options_target to combo box for use in live components

0.5.0 - 7 months ago

• Remove dependency on Timex #86
• Add data table col attr date_format #76
• Update deps (live view 0.20.0)

0.4.11 - 7 months ago

• Added deprecation warning for translation helper module
• Update deps

0.4.10 - 8 months ago

• Relaxed Petal Components dep
• Fix: data table translations now work (anyone using config :petal_framework, :translation_helper_module ..., please see new docs module docs for PetalFramework.TranslationHelpers)

0.4.9 - 10 months ago

• Fix: updated some wrong field types on the generators

0.4.8 - 10 months ago

• Fix: <.combo_box> dropdown staying open after selection
• Fix: <.combo_box> dropdown closing when trying to select multiple

0.4.7 - 10 months ago

• Updated: <.combo_box> now updates when options or placeholder change

0.4.6 - 10 months ago

• Fix combo_box error issues

0.4.5 - 10 months ago

• Fix public_layout mobile view menu

0.4.4 - 10 months ago

• Bump phoenix_live_view dep
• Combo-box now supports fully custom JS options (eg. render templates)

0.4.3 - 11 months ago

• Fix: combo box styling on mobile
• Updated: <.stacked_layout> has a new attr sticky

0.4.2 - 11 months ago

• Touch up the styling for combo box

0.4.1 - 11 months ago

• Fixed: <.combo_box> passing empty string in list when no value is selected
• Updated: <.combo_box> error outline
• Updated: generators now use the new Petal Component <.field>’s

0.4.0 - 11 months ago

• New: <.combo_box> component
• Updated: allow color scheme switch class to be customisable

0.3.2 - 1 year ago

• Allow color_scheme_switch class to be customisable

0.3.1 - 1 year ago

• Stacked & sidebar layouts updated and now support nested menu items

0.3.0 - 1 year ago

• Breaking: Renamed notification/1 to flash/1
• New: flash_group/1 component. Put this in your layout to render flashes

0.2.3 - 1 year ago

• Fixed: compile error

0.2.2 - 1 year ago

• Updated petal.gen.live to use latest data_table changes

0.2.1 - 1 year ago

• Fixed: petal.gen.html warnings

0.2.0 - 1 year ago

• Changed: Added the DataTable.search/3 function
• Changed: petal.gen.live no longer modifies the context file

0.1.4 - 1 year ago

• Fix issue with bad module import

0.1.3 - 1 year ago

• Fix issue with bad module import

0.1.2 - 1 year ago

• Can override messages if you want to use translations

0.1.1 - 1 year ago

• Added other components used in Petal Pro
• added extensions
• added page builder

0.1.0 - 1 year ago

• Initial release
• Added DataTable component
• Added petal mix tasks