Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@t-yamanashi(ymn)

PETAL components環境構築

Last updated at Posted at 2024-09-12

目標

下記のcomponentを表示
image.png

参考資料

インストール方法

大まかな流れ

  • phoenix 1.7.0でプロジェクトの作成
    • phoenixのバージョンが1.7.3は相性が悪かった
    • mix.exsにpetal_components追加
  • Tailwindの設定
    • phoenix 1.7.0はTailwindインストール済みである
    • tailwind.config.js変更
    • app.css変更
  • [your_app]_web.ex変更
    • 今回はpetal_experiment_web.ex
  • core_components.exから競合する部分をコメントアウト
  • config.exs変更
  • alpinejs設定
  • サンプルページ作成

プロジェクト作成

$ mix phx.new petal_experiment --no-ecto
$ cd petal_experiment

mix.exsにpetal_components追加

mix.exs
defmodule PetalExperiment.MixProject do
  # 〜省略〜
    defp deps do
    [
      {:phoenix, "~> 1.7.0"},
      {:phoenix_html, "~> 3.3"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.18.16"},
      {:heroicons, "~> 0.5"},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_live_dashboard, "~> 0.7.2"},
      {:esbuild, "~> 0.5", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.1.8", runtime: Mix.env() == :dev},
      {:swoosh, "~> 1.3"},
      {:finch, "~> 0.13"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.20"},
      {:jason, "~> 1.2"},
-     {:plug_cowboy, "~> 2.5"}
+     {:plug_cowboy, "~> 2.5"},
+     {:petal_components, "~> 1.0"}
    ]
  end
  # 〜省略〜
end

$ mix deps.get

Tailwindの設定

assets/tailwind.config.js
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration

+ const colors = require("tailwindcss/colors")
const plugin = require("tailwindcss/plugin")

module.exports = {
  content: [
    "./js/**/*.js",
    "../lib/*_web.ex",
-   "../lib/*_web/**/*.*ex"
+   "../lib/*_web/**/*.*ex",
+   "../deps/petal_components/**/*.*ex",
  ],
  theme: {
    extend: {
      colors: {
        brand: "#FD4F00",

+        primary: colors.blue,
+        secondary: colors.pink,
+        success: colors.green,
+        danger: colors.red,
+        warning: colors.yellow,
+        info: colors.sky,

        // Options: slate, gray, zinc, neutral, stone
        gray: colors.gray,
      }
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"]))
  ]
}
assets/css/app.css
@import "tailwindcss/base";
+ @import "../../deps/petal_components/assets/default.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

petal_experiment_web.exs変更

lib/petal_experiment_web.ex
defmodule PetalExperimentWeb do
  # 〜省略〜
    defp html_helpers do
    quote do
      # HTML escaping functionality
      import Phoenix.HTML
      # Core UI components and translation
      import PetalExperimentWeb.CoreComponents
      import PetalExperimentWeb.Gettext
      # Shortcut for generating JS commands
      alias Phoenix.LiveView.JS

+     use PetalComponents

      # Routes generation with the ~p sigil
      unquote(verified_routes())
    end
  end
  # 〜省略〜
end

core_components.exから競合する部分をコメントアウト

下記に関係する箇所が対象

  • def modal(assigns) do
  • def button(assigns) do
  • def table(assigns) do

長いので↓を参考にしてください

config.exs変更

config/config.exs
import Config

+ config :petal_components, :error_translator_function, {PetalExperimentWeb.ErrorHelpers, :translate_error}
# 〜省略〜

alpinejs設定

lib/petal_experiment_web/components/layouts/root.html.heex
<!DOCTYPE html>
<html lang="en" style="scrollbar-gutter: stable;">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={get_csrf_token()} />
    <.live_title suffix=" · Phoenix Framework">
      <%= assigns[:page_title] || "PetalExperiment" %>
    </.live_title>
    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
    </script>
+   <script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js">
+   </script>
+   <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js">
+   </script>
  </head>
  <body class="bg-white antialiased">
    <%= @inner_content %>
  </body>
</html>

サンプルページ作成

lib/petal_experiment_web/live/petal_live/index.ex
defmodule PetalExperimentWeb.PetalLive.Index do
  use PetalExperimentWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    {:ok, socket}
  end
end
lib/petal_experiment_web/live/petal_live/index.html.heex
<p class="text-2xl mb-10">Petal Components検証</p>

<p class="text-xl mb-1 mt-10">accordion</p>
<.accordion class="w-full">
  <:item heading="Accordion">
    <.p>
      ほげほげ
    </.p>
  </:item>

  <:item heading="Accordion 2">
    <.p>
      ほげほげ
    </.p>
  </:item>
</.accordion>

<p class="text-xl mb-1 mt-10">alert</p>
<.alert color="success" label="This is a success alert" />

<p class="text-xl mb-1 mt-10">avatar</p>
<.avatar size="xs" />

<p class="text-xl mb-1 mt-10">badge</p>
<.badge color="primary" label="Primary" />

<p class="text-xl mb-1 mt-10">breadcrumbs</p>
<.breadcrumbs
  separator="chevron"
  links={[
    %{label: "Link 1", to: "#"},
    %{label: "Link 2", to: "#", link_type: "live_patch"},
    %{label: "Link 3", to: "#", link_type: "live_redirect"}
  ]}
/>

<p class="text-xl mb-1 mt-10">button</p>
<.button color="primary" label="Primary" />

<p class="text-xl mb-1 mt-10">card</p>
<.card>
  <.card_content category="カテゴリ" class="max-w-sm" heading="ヘッダー">
    内容 12345689123456891234568912345689123456891234568912345689123456891234568912345689
  </.card_content>
</.card>

<p class="text-xl mb-1 mt-10">dropdown</p>
<.dropdown>
  <.dropdown_menu_item label="ほげほげ" />
  <.dropdown_menu_item label="ほげほげ" />
</.dropdown>

<p class="text-xl mb-1 mt-10">spinner</p>
<.spinner show={true} size="sm" />

<p class="text-xl mb-1 mt-10">rating</p>
<.rating rating={4} total={5} />

<p class="text-xl mb-1 mt-10">pagination</p>
<.pagination link_type="a" class="mb-5" path="/?page" current_page={1} total_pages={10} />

<p class="text-xl mb-1 mt-10">progress</p>
<.progress color="primary" value={10} max={100} class="max-w-full" />

サンプルページのルーターを追加

lib/petal_experiment_web/router.ex
defmodule PetalExperimentWeb.Router 
  # 〜省略〜
  scope "/", PetalExperimentWeb do
    pipe_through :browser

-   get "/", PageController, :home
+   live "/", PetalLive.Index, :index
+   # get "/", PageController, :home
  end  
  # 〜省略〜
end

実行

$ mix phx.server

http://localhost:4000 にアクセス

目標での画面が表示します

ソース(github)

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?