Use backpex together with petal components

[phortx]

I have an app built with petal_components and trying to setup backpex. My mix.exs now looks like this (according to the installation guide of backpex):

defp deps do
  [
    # ...
      {:petal_components, "~> 1.9"},
      {:heroicons,
        github: "tailwindlabs/heroicons",
        tag: "v2.1.1",
        sparse: "optimized",
        app: false,
        compile: false,
        depth: 1},
    # ...
  ]

Which leads to following conflict:

$ mix deps.get
[...]
Dependencies have diverged:
* heroicons (https://github.com/tailwindlabs/heroicons.git - v2.1.1)
  the dependency heroicons in mix.exs is overriding a child dependency:

  > In mix.exs:
    {:heroicons, [env: :prod, git: "https://github.com/tailwindlabs/heroicons.git", tag: "v2.1.1", sparse: "optimized", app: false, compile: false, depth: 1]}

  > In deps/petal_components/mix.exs:
    {:heroicons, "~> 0.5.3", [env: :prod, hex: "heroicons", repo: "hexpm", optional: false]}

  Ensure they match or specify one of the above in your deps and set "override: true"

I can set override: true which doesn't feel very good and also leads to following error:
(Mix) Could not start application heroicons: could not find application file: heroicons.app

Anyone got backpex running together with petal_components?

[Flo0807]

Hey @phortx!

It seems that petal_components uses the heroicons hex package to integrate the icons. The package ships Phoenix Components to be used for icon integration. Backpex doesn't use this package, but tracks the "tailwindlabs/heroicons" GitHub repository with mix to load the icons into the deps. It then requires you to provide a Tailwind CSS plugin to display icons for elements that have the hero-* class.

The "Backpex way" is also the way Phoenix integrates heroicons into new applications (e.g. created with mix phx.new).

Because the way heroicons are integrated is different in Backpex and petal_components, you cannot use override: true.

One way to run Backpex together with petal_components is to still track the "tailwindlabs/heroicons" GitHub repository, but under a different name

In your mix.exs:

defp deps do
  [
      ...
-     {:heroicons
+     {:heroicons_plugin,
        github: "tailwindlabs/heroicons",
        tag: "v2.1.1",
        sparse: "optimized",
        app: false,
        compile: false,
        depth: 1},
  ]
end

and in your tailwind.config.js:

module.exports = {
  ...
  plugins: [
    ...
    // add this plugin
    plugin(function ({ matchComponents, theme }) {
-    let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+    let iconsDir = path.join(__dirname, "../deps/heroicons_plugin/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 })
    })
  ],
}

Some additional resources:

• A discussion by AlanMcCann who also had problems with conflicting versions of heroicons and solved it by renaming the dependency: Default actions not showing? #518
• The section of the Backpex installation guide that explains the Heroicons setup: https://hexdocs.pm/backpex/installation.html#provide-tailwind-plugin-for-heroicons

Thanks for the discussion! I see that some users already had problems with conflicting versions of Heroicons. I will add a section to the installation guide that covers the problem and the solution.

[phortx]

Guten Morgen Florian!

Wow that was an amazing and comprehend answer. When there would be badg for that, you probably would just have won one :D

I'll give it a try! Thank you very much for your time and your amazing work :)

[phortx]

Worked like a charm, thank you very much :)

[phortx]

Now I have the issue that backpex looks rather unstyled. All styles are loaded, no errors in JS Console, everything is setup according to the installation guide except DaisyUI.

Is this related to petal_components too maybe?

[phortx]

Ah good point! Because there have been some issues with the ThemePicker, which is not available in Backpex. I'll set it up again, give me a second ;)

[phortx]

Done with only a light theme and no theme picker. Looks the same.

Hint: The documentation lacks "adding daisyui package to the package.json in assets/" or something similar to provide the daisyui package.

[phortx]

Adding require('daisyui') to the plugins of tailwind.config.js was the solution. Couldn't find that in the installation guide of backpex either. So it looks like backpex actually requires daisyui is already set up (which was not the case for my app). Maybe that's something to add to the installation guide :)

Thanks for your help!

[phortx]

lol now I found the

Make sure you meet the prerequisites before you start the installation.

Sentence. Just overread it somehow ... Sorry for that!

[Flo0807]

No problem! I suppose we should move the prerequisites to the installation file 😁