<%= Faker.Lorem.paragraph() %>
27 | <.ui_js_dropdown variant={[:top]}> 28 | <:button class="e2e-dropdown-button-id"> 29 | <.ui_icon name="caret-up" class="a-button__icon" /> 30 | 31 | 32 | <:menu id="a-dropdown"> 33 | <.ui_dropdown_option href={Routes.page_path(@socket, :index)} class="e2e-dropdown-option-id"> 34 | Funky 35 | 36 | <.ui_dropdown_option> 37 | Flurky 38 | 39 | 40 | 41 | 42 |<%= Faker.Lorem.paragraph() %>
15 | 16 | <.form :let={f} for={@changeset} class="e2e-form"> 17 | <.ui_input form={f} field={:name} required /> 18 | 19 | 20 | <%= Gettext.with_locale("de", fn -> %> 21 | <.form :let={f} for={@changeset} class="e2e-form-de"> 22 | <.ui_input form={f} field={:name} required /> 23 | 24 | <% end) %> 25 | 26 | <.ui_js_dropdown> 27 | <:button label="Menu" class="e2e-dropdown-button" /> 28 | <:menu> 29 | <.ui_dropdown_option href={Routes.live_path(@conn, BitstylesPhoenixDemoWeb.DemoLive)} class="e2e-dropdown-option"> 30 | Live 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /demo/lib/bitstyles_phoenix_demo_web/templates/layout/app.html.heex: -------------------------------------------------------------------------------- 1 | <.ui_js_sidebar_layout> 2 | <:large_sidebar> 3 | 4 | 5 | bitcrowd 6 | 7 | 8 | <:small_sidebar :let={s}> 9 |
10 |
11 |
12 | bitcrowd
13 |
14 |
18 |
19 | <:sidebar_content>
20 | <.ui_sidebar_nav>
21 | <.ui_sidebar_nav_item><.ui_button href={Routes.page_path(@conn, :index)} class="u-flex-grow-1 e2e-sidebar-alpine" variant="nav">Alpine 3
22 | <.ui_sidebar_nav_item><.ui_button href={Routes.live_path(@conn, BitstylesPhoenixDemoWeb.DemoLive)} class="u-flex-grow-1 e2e-sidebar-live" variant="nav">Live
23 |
24 |
25 | <:main :let={s}>
26 | <.ui_js_sidebar_open sidebar={s} class="u-margin-s e2e-sidebar-open"/>
27 | <%= if content = get_flash(@conn, :info) do %>
28 | <.ui_flash variant={[:positive, :full]}>
29 | <%= content %>
30 |
31 | <% end %>
32 | <%= if content = get_flash(@conn, :warning) do %>
33 | <.ui_flash variant={[:warning, :full]}>
34 | <.ui_icon name="exclamation" class="u-flex-shrink-0 u-margin-m-right" />
35 | <%= content %>
36 |
37 | <% end %>
38 | <%= if content = get_flash(@conn, :error) do %>
39 | <.ui_flash variant={[:danger, :full]}>
40 | <.ui_icon name="exclamation" class="u-flex-shrink-0 u-margin-m-right" />
41 | <%= content %>
42 |
43 | <% end %>
44 | <%= @inner_content %>
45 |
46 |
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # BitstylesPhoenix
2 |
3 | [](https://hex.pm/packages/bitstyles_phoenix)
4 | [](https://hexdocs.pm/bitstyles_phoenix)
5 | [](./LICENSE.txt)
6 |
7 | Basic helpers for [bitstyles](https://github.com/bitcrowd/bitstyles) for elixir phoenix projects.
8 |
9 | ## Requirements
10 |
11 | Bitstyles must be installed separately into the asset generation. The helpers in this project just output classes for working with bitstyles.
12 |
13 | Bitstyles versions from 6.0.0 down to 1.3.0 are supported.
14 |
15 | ## Installation
16 |
17 | The package can be installed by adding `bitstyles_phoenix` to your list of dependencies in `mix.exs`:
18 |
19 | ```elixir
20 | def deps do
21 | [
22 | {:bitstyles_phoenix, "~> 2.5"}
23 | ]
24 | end
25 | ```
26 |
27 | To make use of the various `ui_*` helpers in the project, just add a use statement to the phoenix application view_helpers:
28 |
29 | ```elixir
30 | defp view_helpers do
31 | quote do
32 | # Use all HTML functionality (forms, tags, etc)
33 | use Phoenix.HTML
34 | use BitstylesPhoenix
35 |
36 | # Import basic rendering functionality (render, render_layout, etc)
37 | import Phoenix.View
38 |
39 | ...
40 | end
41 | end
42 |
43 | ```
44 |
45 | ## Getting started
46 |
47 | Check out the top level `BitstylesPhoenix` module for usage examples, for the `ui_*` helpers.
48 |
49 | Documentation can be generated with [ExDoc](https://github.com/elixir-lang/ex_doc)
50 | and published on [HexDocs](https://hexdocs.pm). Once published, the docs can
51 | be found at [https://hexdocs.pm/bitstyles_phoenix](https://hexdocs.pm/bitstyles_phoenix).
52 |
53 | ## Configuration
54 |
55 | Check out the top level `BitstylesPhoenix` module for configuration examples and documentation.
56 |
57 | ## Developing bitstyles_phoenix
58 |
59 | To live update the documentation when you change the `lib` folder you can do:
60 |
61 | ```sh
62 | mix docs && fswatch -o lib | xargs -n1 -I {} mix docs
63 | ```
64 |
65 | For running the demo app & integration tests check out the [demo README](demo/README.md).
66 |
--------------------------------------------------------------------------------
/mix.exs:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenix.MixProject do
2 | use Mix.Project
3 |
4 | def project do
5 | [
6 | app: :bitstyles_phoenix,
7 | version: "2.5.2",
8 | elixir: "~> 1.11",
9 | elixirc_paths: elixirc_paths(Mix.env()),
10 | start_permanent: Mix.env() == :prod,
11 | deps: deps(),
12 | description: "A collection of Elixir phoenix helpers for bitstyles",
13 | package: package(),
14 | source_url: "https://github.com/bitcrowd/bitstyles_phoenix",
15 | docs: [
16 | main: "BitstylesPhoenix",
17 | assets: %{"assets" => "assets"},
18 | logo: "assets/logo.svg",
19 | extras: ["CHANGELOG.md", "README.md", "LICENSE.txt"],
20 | groups_for_modules: [
21 | Helpers: ~r/Helper/,
22 | Components: ~r/Component/,
23 | "Live components": ~r/Live/,
24 | "Alpine components": ~r/Alpine/
25 | ],
26 | nest_modules_by_prefix: [
27 | BitstylesPhoenix.Component,
28 | BitstylesPhoenix.Alpine3,
29 | BitstylesPhoenix.Live,
30 | BitstylesPhoenix.Helper
31 | ],
32 | before_closing_head_tag: &custom_css/1
33 | ]
34 | ]
35 | end
36 |
37 | def custom_css(:html), do: ""
38 | def custom_css(_), do: ""
39 |
40 | # Run "mix help compile.app" to learn about applications.
41 | def application do
42 | [
43 | extra_applications: [:logger]
44 | ]
45 | end
46 |
47 | defp elixirc_paths(:test), do: ["lib", "test/support"]
48 |
49 | defp elixirc_paths(_), do: ["lib"]
50 |
51 | # Run "mix help deps" to learn about dependencies.
52 | defp deps do
53 | [
54 | {:jason, "~> 1.0"},
55 | {:phoenix_live_view, "~> 0.18.12 or ~> 0.19.0 or ~> 0.20.0"},
56 | {:phoenix_html, "~> 3.3 or ~> 4.0"},
57 | {:floki, "~> 0.38", only: [:test, :dev]},
58 | {:ex_doc, ">= 0.0.0", only: :dev, runtime: false},
59 | {:credo, ">= 0.0.0", only: :dev, runtime: false}
60 | ]
61 | end
62 |
63 | defp package() do
64 | [
65 | # This option is only needed when you don't want to use the OTP application name
66 | name: "bitstyles_phoenix",
67 | licenses: ~w[ISC],
68 | links: %{
69 | "GitHub" => "https://github.com/bitcrowd/bitstyles_phoenix",
70 | "bitstyles" => "https://github.com/bitcrowd/bitstyles"
71 | }
72 | ]
73 | end
74 | end
75 |
--------------------------------------------------------------------------------
/demo/lib/bitstyles_phoenix_demo_web.ex:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenixDemoWeb do
2 | @moduledoc false
3 |
4 | def controller do
5 | quote do
6 | use Phoenix.Controller, namespace: BitstylesPhoenixDemoWeb
7 |
8 | import Plug.Conn
9 | import BitstylesPhoenixDemoWeb.Gettext
10 | alias BitstylesPhoenixDemoWeb.Router.Helpers, as: Routes
11 | end
12 | end
13 |
14 | def view do
15 | quote do
16 | use Phoenix.View,
17 | root: "lib/bitstyles_phoenix_demo_web/templates",
18 | namespace: BitstylesPhoenixDemoWeb
19 |
20 | # Import convenience functions from controllers
21 | import Phoenix.Controller,
22 | only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]
23 |
24 | use BitstylesPhoenix.Alpine3
25 |
26 | # Include shared imports and aliases for views
27 | unquote(view_helpers())
28 | end
29 | end
30 |
31 | def live_view do
32 | quote do
33 | use Phoenix.LiveView,
34 | layout: {BitstylesPhoenixDemoWeb.LayoutView, :live}
35 |
36 | use BitstylesPhoenix.Live
37 |
38 | unquote(view_helpers())
39 | end
40 | end
41 |
42 | def live_component do
43 | quote do
44 | use Phoenix.LiveComponent
45 |
46 | use BitstylesPhoenix.Live
47 |
48 | unquote(view_helpers())
49 | end
50 | end
51 |
52 | def router do
53 | quote do
54 | use Phoenix.Router
55 |
56 | import Plug.Conn
57 | import Phoenix.Controller
58 | import Phoenix.LiveView.Router
59 | end
60 | end
61 |
62 | def channel do
63 | quote do
64 | use Phoenix.Channel
65 | import BitstylesPhoenixDemoWeb.Gettext
66 | end
67 | end
68 |
69 | defp view_helpers do
70 | quote do
71 | # Use all HTML functionality (forms, tags, etc)
72 | use Phoenix.HTML
73 |
74 | use BitstylesPhoenix
75 | # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
76 | import Phoenix.Component
77 |
78 | # Import basic rendering functionality (render, render_layout, etc)
79 | import Phoenix.View
80 |
81 | import BitstylesPhoenixDemoWeb.ErrorHelpers
82 | import BitstylesPhoenixDemoWeb.Gettext
83 | alias BitstylesPhoenixDemoWeb.Router.Helpers, as: Routes
84 | end
85 | end
86 |
87 | @doc """
88 | When used, dispatch to the appropriate controller/view/etc.
89 | """
90 | defmacro __using__(which) when is_atom(which) do
91 | apply(__MODULE__, which, [])
92 | end
93 | end
94 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Code of Conduct
2 |
3 | As contributors and maintainers of this project, and in the interest of
4 | fostering an open and welcoming community, we pledge to respect all people who
5 | contribute through reporting issues, posting feature requests, updating
6 | documentation, submitting pull requests or patches, and other activities.
7 |
8 | We are committed to making participation in this project a harassment-free
9 | experience for everyone, regardless of level of experience, gender, gender
10 | identity and expression, sexual orientation, disability, personal appearance,
11 | body size, race, ethnicity, age, religion, or nationality.
12 |
13 | Examples of unacceptable behavior by participants include:
14 |
15 | * The use of sexualized language or imagery
16 | * Personal attacks
17 | * Trolling or insulting/derogatory comments
18 | * Public or private harassment
19 | * Publishing other's private information, such as physical or electronic
20 | addresses, without explicit permission
21 | * Other unethical or unprofessional conduct
22 |
23 | Project maintainers have the right and responsibility to remove, edit, or
24 | reject comments, commits, code, wiki edits, issues, and other contributions
25 | that are not aligned to this Code of Conduct, or to ban temporarily or
26 | permanently any contributor for other behaviors that they deem inappropriate,
27 | threatening, offensive, or harmful.
28 |
29 | By adopting this Code of Conduct, project maintainers commit themselves to
30 | fairly and consistently applying these principles to every aspect of managing
31 | this project. Project maintainers who do not follow or enforce the Code of
32 | Conduct may be permanently removed from the project team.
33 |
34 | This code of conduct applies both within project spaces and in public spaces
35 | when an individual is representing the project or its community.
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
38 | reported by contacting a project maintainer at darren@bitcrowd.net. All
39 | complaints will be reviewed and investigated and will result in a response that
40 | is deemed necessary and appropriate to the circumstances. Maintainers are
41 | obligated to maintain confidentiality with regard to the reporter of an
42 | incident.
43 |
44 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
45 | version 1.3.0, available at
46 | [http://contributor-covenant.org/version/1/3/0/][version]
47 |
48 | [homepage]: http://contributor-covenant.org
49 | [version]: http://contributor-covenant.org/version/1/3/0/
--------------------------------------------------------------------------------
/lib/bitstyles_phoenix/component/use_svg.ex:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenix.Component.UseSVG do
2 | use BitstylesPhoenix.Component
3 |
4 | @moduledoc """
5 | Components for rendering SVGs.
6 | """
7 |
8 | @doc ~S"""
9 | Renders an SVG tag with a `use` reference.
10 | """
11 |
12 | story(
13 | "A referenced SVG (inlined on the page)",
14 | """
15 | iex> assigns = %{}
16 | ...> render ~H\"""
17 | ...> <.ui_svg use="arrow"/>
18 | ...> \"""
19 | """,
20 | """
21 | \"""
22 |
26 | \"""
27 | """,
28 | extra_html: """
29 |
34 | """
35 | )
36 |
37 | story(
38 | "A referenced SVG (external file)",
39 | """
40 | iex> assigns = %{}
41 | ...> render ~H\"""
42 | ...> <.ui_svg use="logo" file="assets/logo.svg" viewbox="0 0 400 280"/>
43 | ...> \"""
44 | """,
45 | """
46 | \"""
47 |
51 | \"""
52 | """,
53 | background: "white"
54 | )
55 |
56 | story(
57 | "A referenced SVG (external file with symbols)",
58 | """
59 | iex> assigns = %{}
60 | ...> render ~H\"""
61 | ...> <.ui_svg file="assets/icons.svg" use="icon-bin"/>
62 | ...> \"""
63 | """,
64 | """
65 | \"""
66 |
70 | \"""
71 | """,
72 | background: "white"
73 | )
74 |
75 | def ui_svg(assigns) do
76 | extra =
77 | assigns
78 | |> assigns_to_attributes([:file, :use])
79 | |> Keyword.put_new(:xmlns, "http://www.w3.org/2000/svg")
80 |
81 | assigns = assign(assigns, href: href(assigns), extra: extra)
82 |
83 | ~H"""
84 |
87 | """
88 | end
89 |
90 | defp href(assigns), do: "#{assigns[:file]}##{assigns[:use]}"
91 | end
92 |
--------------------------------------------------------------------------------
/demo/lib/bitstyles_phoenix_demo_web/templates/layout/live.html.heex:
--------------------------------------------------------------------------------
1 |
15 | <.ui_js_sidebar_close sidebar={s} class="e2e-sidebar-close"/>
16 |
17 |
10 |
11 |
12 | bitcrowd
13 |
14 |
18 |
19 | <:sidebar_content>
20 | <.ui_sidebar_nav>
21 | <.ui_sidebar_nav_item><.ui_button href={Routes.page_path(@socket, :index)} class="u-flex-grow-1 e2e-sidebar-alpine" variant="nav">Alpine 3
22 | <.ui_sidebar_nav_item><.ui_button href={Routes.live_path(@socket, BitstylesPhoenixDemoWeb.DemoLive)} class="u-flex-grow-1 e2e-sidebar-live" variant="nav">Live
23 |
24 |
25 | <:main :let={s}>
26 | <%= if content = live_flash(@flash, :info) do %>
27 | <.ui_flash variant="positive" phx-click="lv:clear-flash" phx-value-key="info">
28 | <%= content %>
29 |
30 | <% end %>
31 | <%= if content = live_flash(@flash, :warning) do %>
32 | <.ui_flash variant="warning" phx-click="lv:clear-flash" phx-value-key="warning">
33 | <.ui_icon name="exclamation" class= "u-flex-shrink-0 u-margin-m-right" />
34 | <%= content %>
35 |
36 | <% end %>
37 | <%= if content = live_flash(@flash, :error) do %>
38 | <.ui_flash variant="danger" phx-click="lv:clear-flash" phx-value-key="error">
39 | <.ui_icon name="exclamation" class= "u-flex-shrink-0 u-margin-m-right" />
40 | <%= content %>
41 |
42 | <% end %>
43 |
15 |
17 |
44 |
50 | <%= @inner_content %>
51 |
52 |
33 | Content
34 |
35 | \"""
36 | """,
37 | width: "100%"
38 | )
39 |
40 | story(
41 | "Full content",
42 | """
43 | iex> assigns = %{}
44 | ...> render ~H\"""
45 | ...> <.ui_content variant="full">
46 | ...> Full Content
47 | ...>
48 | ...> \"""
49 | """,
50 | """
51 | \"""
52 |
53 | Full Content
54 |
55 | \"""
56 | """,
57 | width: "100%"
58 | )
59 |
60 | story(
61 | "Extra classes and attributes",
62 | """
63 | iex> assigns = %{}
64 | ...> render ~H\"""
65 | ...> <.ui_content variant="full" class="u-h2" data-foo="bar">
66 | ...> Content with extra
67 | ...>
68 | ...> \"""
69 | """,
70 | """
71 | \"""
72 |
73 | Content with extra
74 |
75 | \"""
76 | """,
77 | width: "100%"
78 | )
79 |
80 | def ui_content(assigns) do
81 | variant_classes = assigns[:variant] |> List.wrap() |> Enum.map_join(" ", &"a-content--#{&1}")
82 |
83 | class = classnames(["a-content", variant_classes, assigns[:class]])
84 |
85 | extra = assigns_to_attributes(assigns, [:class, :variant])
86 | assigns = assign(assigns, class: class, extra: extra)
87 |
88 | ~H"""
89 |
90 | <%= render_slot(@inner_block) %>
91 |
92 | """
93 | end
94 | end
95 |
--------------------------------------------------------------------------------
/demo/config/dev.exs:
--------------------------------------------------------------------------------
1 | import Config
2 |
3 | # For development, we disable any cache and enable
4 | # debugging and code reloading.
5 | #
6 | # The watchers configuration can be used to run external
7 | # watchers to your application. For example, we use it
8 | # with esbuild to bundle .js and .css sources.
9 | config :bitstyles_phoenix_demo, BitstylesPhoenixDemoWeb.Endpoint,
10 | # Binding to loopback ipv4 address prevents access from other machines.
11 | # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
12 | http: [ip: {127, 0, 0, 1}, port: 4000],
13 | check_origin: false,
14 | code_reloader: true,
15 | debug_errors: true,
16 | secret_key_base: "Hrpu8ebXpVlCvQjFLp6QnEKazpMs/m0wWeyPV7GbNmHPzGRztjIXF8LtWE5FqLxj",
17 | watchers: [
18 | # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
19 | esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
20 | sass: {
21 | DartSass,
22 | :install_and_run,
23 | [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
24 | },
25 | bitstyles: {Mix.Task, :run, ["bitstyles.watch"]}
26 | ]
27 |
28 | # ## SSL Support
29 | #
30 | # In order to use HTTPS in development, a self-signed
31 | # certificate can be generated by running the following
32 | # Mix task:
33 | #
34 | # mix phx.gen.cert
35 | #
36 | # Note that this task requires Erlang/OTP 20 or later.
37 | # Run `mix help phx.gen.cert` for more information.
38 | #
39 | # The `http:` config above can be replaced with:
40 | #
41 | # https: [
42 | # port: 4001,
43 | # cipher_suite: :strong,
44 | # keyfile: "priv/cert/selfsigned_key.pem",
45 | # certfile: "priv/cert/selfsigned.pem"
46 | # ],
47 | #
48 | # If desired, both `http:` and `https:` keys can be
49 | # configured to run both http and https servers on
50 | # different ports.
51 |
52 | # Watch static and templates for browser reloading.
53 | config :bitstyles_phoenix_demo, BitstylesPhoenixDemoWeb.Endpoint,
54 | live_reload: [
55 | patterns: [
56 | ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
57 | ~r"priv/gettext/.*(po)$",
58 | ~r"lib/bitstyles_phoenix_demo_web/(live|views)/.*(ex)$",
59 | ~r"lib/bitstyles_phoenix_demo_web/templates/.*(eex)$"
60 | ]
61 | ]
62 |
63 | # Do not include metadata nor timestamps in development logs
64 | config :logger, :console, format: "[$level] $message\n"
65 |
66 | # Set a higher stacktrace during development. Avoid configuring such
67 | # in production as building large stacktraces may be expensive.
68 | config :phoenix, :stacktrace_depth, 20
69 |
70 | # Initialize plugs at runtime for faster development compilation
71 | config :phoenix, :plug_init_mode, :runtime
72 |
--------------------------------------------------------------------------------
/lib/bitstyles_phoenix/helper/classnames.ex:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenix.Helper.Classnames do
2 | alias BitstylesPhoenix.Bitstyles
3 |
4 | @default_prefix "e2e-"
5 |
6 | @moduledoc """
7 | The very best of NPM, now for elixir.
8 | """
9 |
10 | @doc """
11 | Concatenates lists of class names, with trimming and conditionals.
12 |
13 | Classes prefixes with `e2e-` are removed by default. This behaviour can be configured with
14 | the `trim_e2e_classes` configuration. Check `BitstylesPhoenix` top level documentation for
15 | more information on configuration options.
16 |
17 | ## Examples
18 |
19 | iex> classnames("foo")
20 | "foo"
21 |
22 | iex> classnames("e2e-out")
23 | false
24 |
25 | iex> classnames(nil)
26 | false
27 |
28 | iex> classnames(" foo ")
29 | "foo"
30 |
31 | iex> classnames(" foo bar ")
32 | "foo bar"
33 |
34 | iex> classnames(["foo", "bar"])
35 | "foo bar"
36 |
37 | iex> classnames(["foo", "bar baz"])
38 | "foo bar baz"
39 |
40 | iex> classnames(:foo)
41 | "foo"
42 |
43 | iex> classnames({"foo", 1 == 1})
44 | "foo"
45 |
46 | iex> classnames({"foo", 1 == 2})
47 | false
48 |
49 | iex> classnames([" foo boing ", {"bar", 1 == 2}, :baz])
50 | "foo boing baz"
51 | """
52 | def classnames(arg, opts \\ [backwards_compatible: true]) do
53 | arg
54 | |> List.wrap()
55 | |> Enum.map(&normalize/1)
56 | |> Enum.flat_map(&split/1)
57 | |> Enum.reject(&remove_class?/1)
58 | |> Enum.uniq()
59 | |> Enum.map_join(" ", &bitstyles_version(&1, opts))
60 | |> case do
61 | "" -> false
62 | classnames -> classnames
63 | end
64 | end
65 |
66 | defp bitstyles_version(name, opts) do
67 | if Keyword.get(opts, :backwards_compatible) do
68 | Bitstyles.classname(name)
69 | else
70 | name
71 | end
72 | end
73 |
74 | defp normalize(nil), do: ""
75 | defp normalize({class, true}), do: classnames(class)
76 | defp normalize({_class, false}), do: ""
77 | defp normalize({_class, nil}), do: ""
78 | defp normalize(class) when is_binary(class), do: String.trim(class)
79 | defp normalize(class) when is_atom(class), do: class |> to_string() |> String.trim()
80 |
81 | defp split(class), do: String.split(class, " ")
82 |
83 | defp remove_class?(""), do: true
84 |
85 | defp remove_class?(class) when is_binary(class) do
86 | config = Application.get_env(:bitstyles_phoenix, :trim_e2e_classes, [])
87 | prefix = Keyword.get(config, :prefix, @default_prefix)
88 | Keyword.get(config, :enabled, true) && String.starts_with?(class, prefix)
89 | end
90 |
91 | defp remove_class?(_value), do: false
92 | end
93 |
--------------------------------------------------------------------------------
/demo/assets/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "assets",
3 | "lockfileVersion": 2,
4 | "requires": true,
5 | "packages": {
6 | "": {
7 | "license": "ISC",
8 | "dependencies": {
9 | "alpinejs": "^3.5.1",
10 | "bitstyles": "^4.0.0"
11 | }
12 | },
13 | "node_modules/@vue/reactivity": {
14 | "version": "3.1.5",
15 | "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
16 | "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
17 | "dependencies": {
18 | "@vue/shared": "3.1.5"
19 | }
20 | },
21 | "node_modules/@vue/shared": {
22 | "version": "3.1.5",
23 | "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
24 | "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
25 | },
26 | "node_modules/alpinejs": {
27 | "version": "3.10.5",
28 | "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.5.tgz",
29 | "integrity": "sha512-qlvnal44Gof2XVfm/lef8fYpXKxR9fjdSki7aFB/9THyFvbsRKZ6lM5SjxXpIs7B0faJt7bgpK2K25gzrraXJw==",
30 | "dependencies": {
31 | "@vue/reactivity": "~3.1.1"
32 | }
33 | },
34 | "node_modules/bitstyles": {
35 | "version": "4.3.0",
36 | "resolved": "https://registry.npmjs.org/bitstyles/-/bitstyles-4.3.0.tgz",
37 | "integrity": "sha512-Iw6tnPNAvmxZq/zH7WyOb+U5RQ/7JpijDN0iFvqlLMhdHr0L8yVYJfHF36mZBAO1EBLtpG+Zzhj/KDb2bzgQpg=="
38 | }
39 | },
40 | "dependencies": {
41 | "@vue/reactivity": {
42 | "version": "3.1.5",
43 | "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
44 | "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
45 | "requires": {
46 | "@vue/shared": "3.1.5"
47 | }
48 | },
49 | "@vue/shared": {
50 | "version": "3.1.5",
51 | "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
52 | "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
53 | },
54 | "alpinejs": {
55 | "version": "3.10.5",
56 | "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.5.tgz",
57 | "integrity": "sha512-qlvnal44Gof2XVfm/lef8fYpXKxR9fjdSki7aFB/9THyFvbsRKZ6lM5SjxXpIs7B0faJt7bgpK2K25gzrraXJw==",
58 | "requires": {
59 | "@vue/reactivity": "~3.1.1"
60 | }
61 | },
62 | "bitstyles": {
63 | "version": "4.3.0",
64 | "resolved": "https://registry.npmjs.org/bitstyles/-/bitstyles-4.3.0.tgz",
65 | "integrity": "sha512-Iw6tnPNAvmxZq/zH7WyOb+U5RQ/7JpijDN0iFvqlLMhdHr0L8yVYJfHF36mZBAO1EBLtpG+Zzhj/KDb2bzgQpg=="
66 | }
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/demo/mix.exs:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenixDemo.MixProject do
2 | use Mix.Project
3 |
4 | def project do
5 | [
6 | app: :bitstyles_phoenix_demo,
7 | version: "0.1.0",
8 | elixir: "~> 1.12",
9 | elixirc_paths: elixirc_paths(Mix.env()),
10 | compilers: [:gettext] ++ Mix.compilers(),
11 | start_permanent: Mix.env() == :prod,
12 | aliases: aliases(),
13 | deps: deps()
14 | ]
15 | end
16 |
17 | # Configuration for the OTP application.
18 | #
19 | # Type `mix help compile.app` for more information.
20 | def application do
21 | [
22 | mod: {BitstylesPhoenixDemo.Application, []},
23 | extra_applications: [:logger, :runtime_tools]
24 | ]
25 | end
26 |
27 | # Specifies which paths to compile per environment.
28 | defp elixirc_paths(:test), do: ["lib", "test/support"]
29 | defp elixirc_paths(_), do: ["lib"]
30 |
31 | # Specifies your project dependencies.
32 | #
33 | # Type `mix help deps` for examples and options.
34 | defp deps do
35 | [
36 | {:bitstyles_phoenix, path: '..'},
37 | {:faker, "~> 0.17"},
38 | {:ecto, "~> 3.7.1"},
39 | {:dart_sass, "~> 0.3", runtime: Mix.env() == :dev},
40 | {:phoenix, "~> 1.6.2"},
41 | {:phoenix_ecto, "~> 4.0"},
42 | {:phoenix_html, "~> 3.0"},
43 | {:phoenix_live_reload, "~> 1.2", only: :dev},
44 | {:phoenix_live_view, "~> 0.18.0"},
45 | {:floki, ">= 0.30.0", only: :test},
46 | {:esbuild, "~> 0.2", runtime: Mix.env() == :dev},
47 | {:telemetry_metrics, "~> 0.6"},
48 | {:telemetry_poller, "~> 1.0"},
49 | {:gettext, "~> 0.18"},
50 | {:jason, "~> 1.2"},
51 | {:plug_cowboy, "~> 2.5"},
52 | {:wallaby, "~> 0.29.0", runtime: false, only: :test}
53 | ]
54 | end
55 |
56 | # Aliases are shortcuts or tasks specific to the current project.
57 | # For example, to install project dependencies and perform other setup tasks, run:
58 | #
59 | # $ mix setup
60 | #
61 | # See the documentation for `Mix` for more info on aliases.
62 | defp aliases do
63 | [
64 | setup: [
65 | "deps.get",
66 | "cmd (cd assets && npm install)"
67 | ],
68 | test: [
69 | "assets.compile",
70 | "test"
71 | ],
72 | bitstyles: [
73 | "cmd mkdir -p priv/static/assets",
74 | "cmd cp -R assets/node_modules/bitstyles/assets/* priv/static/assets"
75 | ],
76 | "bitstyles.watch": [
77 | "bitstyles",
78 | "cmd fswatch -o assets/node_modules | xargs -n1 -I {} mix bitstyles"
79 | ],
80 | "assets.compile": [
81 | "esbuild default --minify",
82 | "sass default --no-source-map --style=compressed",
83 | "bitstyles"
84 | ],
85 | "assets.deploy": [
86 | "assets.compile",
87 | "phx.digest"
88 | ]
89 | ]
90 | end
91 | end
92 |
--------------------------------------------------------------------------------
/demo/test/bitstyles_phoenix_demo_web/bitstyles_phoenix_test.exs:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenixWebDemo.BitstylesPhoenixTest do
2 | use ExUnit.Case, async: true
3 | use Wallaby.Feature
4 |
5 | feature "renders errors from gettext", %{session: session} do
6 | session
7 | |> visit("/")
8 | |> find(Query.css(".e2e-form", count: 1))
9 | |> assert_has(Query.css(".u-fg-warning", text: "can't be blank"))
10 |
11 | session
12 | |> find(Query.css(".e2e-form-de", count: 1))
13 | |> assert_has(Query.css(".u-fg-warning", text: "muss ausgefüllt werden"))
14 | end
15 |
16 | feature "allows icon config and can still render inline", %{session: session} do
17 | session
18 | |> visit("/")
19 | |> find(Query.css(".e2e-external-svg-icon use", count: 1), fn element ->
20 | assert {width, height} = Element.size(element)
21 | assert width > 0
22 | assert height > 0
23 | end)
24 | |> find(Query.css(".e2e-inline-svg-icon use", count: 1), fn element ->
25 | assert {width, height} = Element.size(element)
26 | assert width > 0
27 | assert height > 0
28 | end)
29 | end
30 |
31 | feature "alpine & live dropdowns", %{session: session} do
32 | session
33 | |> visit("/")
34 | |> refute_has(Query.css(".e2e-dropdown-option"))
35 | |> click(Query.css(".e2e-dropdown-button"))
36 | |> assert_has(Query.css(".e2e-dropdown-option"))
37 | |> click(Query.css(".e2e-dropdown-option"))
38 | |> assert_text("Live test")
39 | |> refute_has(Query.css(".e2e-dropdown-option"))
40 | |> click(Query.css(".e2e-dropdown-button"))
41 | |> assert_has(Query.css(".e2e-dropdown-option"))
42 | |> click(Query.css(".e2e-dropdown-button-id"))
43 | |> wait_css_transition()
44 | |> assert_has(Query.css(".e2e-dropdown-option-id"))
45 | |> refute_has(Query.css(".e2e-dropdown-option"))
46 | |> click(Query.css(".e2e-dropdown-option-id"))
47 | |> assert_text("Alpine test")
48 | end
49 |
50 | feature "alpine & live sidebars", %{session: session} do
51 | session
52 | |> visit("/")
53 | |> assert_has(Query.css(".e2e-sidebar-alpine"))
54 | |> assert_has(Query.css(".e2e-sidebar-live"))
55 | |> click(Query.css(".e2e-sidebar-live"))
56 | |> assert_text("Live test")
57 | |> assert_has(Query.css(".e2e-sidebar-alpine"))
58 | |> assert_has(Query.css(".e2e-sidebar-live"))
59 | |> Wallaby.Browser.resize_window(500, 800)
60 | |> refute_has(Query.css(".e2e-sidebar-alpine"))
61 | |> refute_has(Query.css(".e2e-sidebar-live"))
62 | |> click(Query.css(".e2e-sidebar-open"))
63 | |> wait_css_transition()
64 | |> assert_has(Query.css(".e2e-sidebar-alpine"))
65 | |> assert_has(Query.css(".e2e-sidebar-live"))
66 | |> click(Query.css(".e2e-sidebar-close"))
67 | |> wait_css_transition()
68 | |> refute_has(Query.css(".e2e-sidebar-alpine"))
69 | |> refute_has(Query.css(".e2e-sidebar-live"))
70 | |> click(Query.css(".e2e-sidebar-open"))
71 | |> wait_css_transition()
72 | |> click(Query.css(".e2e-sidebar-alpine"))
73 | |> refute_has(Query.css(".e2e-sidebar-alpine"))
74 | |> refute_has(Query.css(".e2e-sidebar-live"))
75 | |> click(Query.css(".e2e-sidebar-open"))
76 | |> assert_has(Query.css(".e2e-sidebar-alpine"))
77 | |> assert_has(Query.css(".e2e-sidebar-live"))
78 | |> click(Query.css(".e2e-sidebar-close"))
79 | |> wait_css_transition()
80 | |> refute_has(Query.css(".e2e-sidebar-alpine"))
81 | |> refute_has(Query.css(".e2e-sidebar-live"))
82 | |> Wallaby.Browser.resize_window(1200, 800)
83 | |> assert_has(Query.css(".e2e-sidebar-alpine"))
84 | |> assert_has(Query.css(".e2e-sidebar-live"))
85 | end
86 |
87 | defp wait_css_transition(session, time \\ 500) do
88 | :timer.sleep(time)
89 | session
90 | end
91 | end
92 |
--------------------------------------------------------------------------------
/lib/bitstyles_phoenix/live/sidebar.ex:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenix.Live.Sidebar do
2 | use BitstylesPhoenix.Component
3 |
4 | alias BitstylesPhoenix.Component.Sidebar, as: RawSidebar
5 | alias Phoenix.LiveView.JS
6 | import BitstylesPhoenix.Component.Button
7 | import Phoenix.LiveView.Utils, only: [random_id: 0]
8 |
9 | @moduledoc """
10 | Components for rendering a sidebar layout powered by LiveView commands.
11 | """
12 |
13 | @doc """
14 | Renders a sidebar layout with LiveView commands.
15 |
16 | Supports all attributes and slots from `BitstylesPhoenix.Component.Sidebar.ui_sidebar_layout/1`.
17 |
18 | The `small_sidebar` and `main`/`inner` blocks will additionally provide a block argument
19 | with the sidebar context for `ui_js_sidebar_open/1` and `ui_js_sidebar_close/1`.
20 |
21 | For examles see `BitstylesPhoenix.Component.Sidebar.ui_sidebar_layout/1`.
22 | """
23 |
24 | def ui_js_sidebar_layout(assigns) do
25 | extra = assigns_to_attributes(assigns, [:small_sidebar])
26 |
27 | {_, small_extra} = assigns_from_single_slot(assigns, :small_sidebar, optional: true)
28 | {_, main_extra} = assigns_from_single_slot(assigns, :main, optional: true)
29 |
30 | small_extra = Keyword.put_new_lazy(small_extra, :id, &random_id/0)
31 |
32 | assigns = assign(assigns, small_extra: small_extra, extra: extra, main_extra: main_extra)
33 |
34 | ~H"""
35 |
28 |
32 | \"""
33 | """
34 | )
35 |
36 | story(
37 | "With extra class",
38 | """
39 | iex> assigns = %{}
40 | ...> render ~H\"""
41 | ...> <.ui_avatar src="https://placehold.co/100x100" class="foo bar" alt="Username’s avatar"/>
42 | ...> \"""
43 | """,
44 | """
45 | \"""
46 |
29 | 
30 |
31 |
47 |
51 | \"""
52 | """
53 | )
54 |
55 | story(
56 | "Large avatar",
57 | """
58 | iex> assigns = %{}
59 | ...> render ~H\"""
60 | ...> <.ui_avatar size="l" src="https://placehold.co/100x100" alt="Username’s avatar" height="46" width="46"/>
61 | ...> \"""
62 | """,
63 | """
64 | \"""
65 |
48 |
49 |
50 |
66 |
70 | \"""
71 | """
72 | )
73 |
74 | story(
75 | "Avatar with a text",
76 | """
77 | iex> assigns = %{}
78 | ...> render ~H\"""
79 | ...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"> Username
80 | ...> \"""
81 | """,
82 | """
83 | \"""
84 |
67 |
68 |
69 |
85 |
92 | \"""
93 | """
94 | )
95 |
96 | def ui_avatar(assigns) do
97 | class =
98 | classnames([
99 | "a-avatar",
100 | {"a-avatar--#{assigns[:size]}", assigns[:size] != nil},
101 | assigns[:class]
102 | ])
103 |
104 | extra =
105 | assigns
106 | |> assigns_to_attributes([:class, :size])
107 | |> put_defaults
108 |
109 | assigns = assign(assigns, extra: extra, class: class)
110 |
111 | ~H"""
112 |
86 |
87 |
88 |
89 | Username
90 |
91 |
113 |
122 | """
123 | end
124 |
125 | @default_size 32
126 | defp put_defaults(opts) do
127 | opts
128 | |> Keyword.put_new(:width, @default_size)
129 | |> Keyword.put_new(:height, @default_size)
130 | end
131 | end
132 |
--------------------------------------------------------------------------------
/lib/bitstyles_phoenix/component/card.ex:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenix.Component.Card do
2 | use BitstylesPhoenix.Component
3 | import BitstylesPhoenix.Component.Flash
4 |
5 | @moduledoc """
6 | A Card component.
7 | """
8 |
9 | @doc ~S"""
10 | Renders a card component. The card component can have default and large sizes,
11 | It accepts a slot for content.
12 | """
13 |
14 | story(
15 | "Default Card",
16 | """
17 | iex> assigns = %{}
18 | ...> render ~H\"""
19 | ...> <.ui_card>
114 | ![]()
115 |
116 | <%= if assigns[:inner_block] do %>
117 |
118 | <%= render_slot(@inner_block) %>
119 |
120 | <% end %>
121 | Hello world
20 | ...> \""" 21 | """, 22 | """ 23 | \""" 24 |26 | Hello world 27 |
28 |Hello world
39 | ...> \""" 40 | """, 41 | """ 42 | \""" 43 |45 | Hello world 46 |
47 |Hello world
60 | ...> 61 | ...> \""" 62 | """, 63 | """ 64 | \""" 65 |
67 |
71 |
68 | Its me mario
69 |
70 | 72 | Hello world 73 |
74 |Hello world
87 | ...> 88 | ...> \""" 89 | """, 90 | """ 91 | \""" 92 |
94 |
98 |
95 | Its me mario
96 |
97 | 99 | Hello world 100 |
101 |...
86 | """ 87 | else 88 | ~H""" 89 |
90 |
94 | """
95 | end
96 | end
97 | ```
98 |
99 | ## Adding new components
100 |
101 | Ideally, if you're adding a completely new component, make sure it works with all supported bitstyles versions by using the [versions showcase](#versions-showcase) to test it.
102 |
103 | If it's not practical to support it in other version, you can perform [a bitstyles version check in the component](#an-example-of-a-bitstyles-version-check-in-a-component).
104 |
--------------------------------------------------------------------------------
/lib/bitstyles_phoenix/component/icon.ex:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenix.Component.Icon do
2 | use BitstylesPhoenix.Component
3 | import BitstylesPhoenix.Component.UseSVG
4 |
5 | @moduledoc """
6 | An SVG icon system, that expects the icons to be present on the page, rendered as SVG `
91 | ...
92 |
93 |
44 |
47 |
50 |
53 |
54 | \"""
55 | """,
56 | transparent: false
57 | )
58 |
59 | story(
60 | "Tabs with active attribute references (string)",
61 | """
62 | iex> assigns = %{}
63 | ...> render ~H\"""
64 | ...> <.ui_tabs active="foo">
65 | ...> <:tab ref="foo">Foo
66 | ...> <:tab ref="bar">Bar
67 | ...> <:tab ref="baz">Baz
68 | ...>
69 | ...> \"""
70 | """,
71 | """
72 | \"""
73 |
74 |
77 |
80 |
83 |
84 | \"""
85 | """,
86 | transparent: false
87 | )
88 |
89 | story(
90 | "Tabs with active attribute references (atom)",
91 | """
92 | iex> assigns = %{}
93 | ...> render ~H\"""
94 | ...> <.ui_tabs active={:foo}>
95 | ...> <:tab ref={:foo}>Foo
96 | ...> <:tab ref={:bar}>Bar
97 | ...> <:tab ref={:baz} class="extra" href="#">Baz
98 | ...>
99 | ...> \"""
100 | """,
101 | """
102 | \"""
103 |
104 |
107 |
110 |
111 | Baz
112 |
113 |
114 | \"""
115 | """,
116 | transparent: false
117 | )
118 |
119 | def ui_tabs(assigns) do
120 | class =
121 | classnames([
122 | "u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s3",
123 | assigns[:class]
124 | ])
125 |
126 | extra = assigns_to_attributes(assigns, [:class, :tab, :active])
127 | assigns = assign(assigns, class: class, extra: extra)
128 |
129 | ~H"""
130 |
131 | <%= for tab <- @tab do %>
132 | <%= if Map.get(tab, :show, true) do %>
133 | <.ui_tab_button {button_options(tab, assigns[:active])}>
134 | <%= render_slot(tab) %>
135 |
136 | <% end %>
137 | <% end %>
138 |
139 | """
140 | end
141 |
142 | defp button_options(tab, active) do
143 | assigns_to_attributes(tab, [:ref, :show])
144 | |> maybe_add_active(tab[:ref], active)
145 | end
146 |
147 | defp maybe_add_active(opts, _, nil), do: opts
148 |
149 | defp maybe_add_active(opts, ref, active_tab) do
150 | Keyword.put(opts, :active, ref == active_tab)
151 | end
152 |
153 | @doc """
154 | Rendering a tab button.
155 |
156 | - `active` - If set, sets `aria-selected` on the button (boolean).
157 | - All other attributes are passed to `BitstylesPhoenix.Component.Button.ui_button/1`.
158 | """
159 | def ui_tab_button(assigns) do
160 | extra = assigns_to_attributes(assigns, [:active])
161 |
162 | active =
163 | assigns
164 | |> Map.get(:active)
165 | |> case do
166 | false -> ["aria-selected": "false"]
167 | true -> ["aria-selected": "true"]
168 | _ -> []
169 | end
170 |
171 | assigns = assign(assigns, extra: Keyword.merge(extra, active))
172 |
173 | ~H"""
174 | <.ui_button {@extra} role="tab" color="tab" shape="tab">
175 | <%= render_slot(@inner_block) %>
176 |
177 | """
178 | end
179 | end
180 |
--------------------------------------------------------------------------------
/lib/bitstyles_phoenix/component/error.ex:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenix.Component.Error do
2 | use BitstylesPhoenix.Component
3 | alias Phoenix.HTML.Form, as: PhxForm
4 |
5 | @moduledoc """
6 | Component for showing UI errors.
7 | """
8 |
9 | @doc """
10 | Render errors from a Phoenix.HTML.Form.
11 |
12 | ## Attributes
13 |
14 | - `form` *(required)* - The form to render the input form.
15 | - `field` *(required)* - The name of the field for the input.
16 | - `class` - Extra classes to pass to the wrapping `ul` if there are mutliple errors.
17 | See `BitstylesPhoenix.Helper.classnames/1` for usage.
18 | - `error_class` - Extra classes to pass to the error component.
19 | See `BitstylesPhoenix.Helper.classnames/1` for usage.
20 |
21 | See also `BitstylesPhoenix.Component.Form`.
22 |
23 | Uses the `translate_errors` MFA from the config to translate field errors (e.g. with `gettext`).
24 | """
25 |
26 | story(
27 | "A single error",
28 | """
29 | iex> assigns = %{form: form_with_errors()}
30 | ...> render ~H\"""
31 | ...> <.ui_errors form={@form} field={:name} />
32 | ...> \"""
33 | """,
34 | "6.0.0": """
35 | \"""
36 |
37 | is too short
38 |
39 | \"""
40 | """,
41 | "5.0.1": """
42 | \"""
43 |
44 | is too short
45 |
46 | \"""
47 | """,
48 | "4.3.0": """
49 | \"""
50 |
51 | is too short
52 |
53 | \"""
54 | """,
55 | "3.0.0": """
56 | \"""
57 |
58 | is too short
59 |
60 | \"""
61 | """
62 | )
63 |
64 | story(
65 | "Multiple errors",
66 | """
67 | iex> assigns = %{form: form_with_errors()}
68 | ...> render ~H\"""
69 | ...> <.ui_errors form={@form} field={:email} />
70 | ...> \"""
71 | """,
72 | """
73 | \"""
74 | -
75 |
- 76 | 77 | is invalid 78 | 79 | 80 |
- 81 | 82 | must end with @bitcrowd.net 83 | 84 | 85 |
-
113 | <%= for error <- @errors do %>
114 |
- 115 | <.ui_error 116 | error={error} 117 | phx-feedback-for={PhxForm.input_name(assigns.form, assigns.field)} 118 | class={assigns[:error_class]} /> 119 | 120 | <% end %> 121 |
50 |
52 |
56 | \"""
57 | """,
58 | height: "400px",
59 | width: "100%",
60 | transparent: false
61 | )
62 |
63 | story(
64 | "Small modal",
65 | """
66 | iex> assigns = %{}
67 | ...> render ~H\"""
68 | ...> <.ui_modal aria-labelledby="dialog-title" variant="s" class="foo">
69 | ...> <:content class="bar" foo="bar">
70 | ...> Content
71 | ...>
72 | ...>
73 | ...> \"""
74 | """,
75 | """
76 | \"""
77 |
53 | Content
54 |
55 |
78 |
80 |
83 |
84 | \"""
85 | """,
86 | height: "400px",
87 | width: "100%",
88 | transparent: false
89 | )
90 |
91 | story(
92 | "Small modal with extra overlay",
93 | """
94 | iex> assigns = %{}
95 | ...> render ~H\"""
96 | ...> <.ui_modal>
97 | ...> <:overlay class="extra" data-foo="bar" />
98 | ...> Content
99 | ...>
100 | ...> \"""
101 | """,
102 | """
103 | \"""
104 |
105 |
107 |
111 | \"""
112 | """,
113 | height: "400px",
114 | width: "100%",
115 | transparent: false
116 | )
117 |
118 | story(
119 | "Small modal with extra overlay content",
120 | """
121 | iex> assigns = %{}
122 | ...> render ~H\"""
123 | ...> <.ui_modal>
124 | ...> <:overlay class="extra" data-foo="bar">
125 | ...> Overlay content
126 | ...>
127 | ...> Content
128 | ...>
129 | ...> \"""
130 | """,
131 | """
132 | \"""
133 |
108 | Content
109 |
110 |
134 |
139 |
143 | \"""
144 | """,
145 | height: "400px",
146 | width: "100%",
147 | transparent: false
148 | )
149 |
150 | def ui_modal(assigns) do
151 | {overlay, overlay_extra} = assigns_from_single_slot(assigns, :overlay, optional: true)
152 | overlay_class = classnames(["o-modal__overlay", overlay_extra[:class]])
153 | overlay_extra = Keyword.put(overlay_extra, :class, overlay_class)
154 |
155 | {content, content_extra} = assigns_from_single_slot(assigns, :content, optional: true)
156 |
157 | content_class =
158 | classnames([
159 | "o-modal__content a-card u-padding-xl@m u-padding-l1 u-flex u-flex-col",
160 | content_extra[:class]
161 | ])
162 |
163 | content_extra = Keyword.merge(content_extra, class: content_class, variant: assigns[:variant])
164 |
165 | assigns =
166 | assign(assigns,
167 | overlay: overlay,
168 | overlay_extra: overlay_extra,
169 | content: content,
170 | content_extra: content_extra
171 | )
172 |
173 | ~H"""
174 |
140 | Content
141 |
142 |
180 |
187 | """
188 | end
189 | end
190 |
--------------------------------------------------------------------------------
/lib/bitstyles_phoenix/component/flash.ex:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenix.Component.Flash do
2 | use BitstylesPhoenix.Component
3 |
4 | import BitstylesPhoenix.Component.Content
5 | alias BitstylesPhoenix.Bitstyles
6 |
7 | @moduledoc """
8 | Component for building flash messages.
9 | """
10 |
11 | @doc ~s"""
12 | Render a flash message.
13 |
14 | Inform the user of a global or important event, such as may happen after a page reload.
15 | There are several variants, which use color, iconography, and html attributes to indicate severity.
16 |
17 | ## Attributes
18 |
19 | - `variant` - specifies which visual variant of flash you want, from those available in CSS.
20 | Defaults include: `brand-1`, `warning`, `info`, `danger`
21 | Additionally you can pass `full` as a variant that will be set on the content class.
22 | Variants can be passed in as binary, atoms or as a list of atoms/binaries.
23 | - `class` - Set CSS classes on the outer div.
24 | - `content_class` - Set CSS classes on the content div.
25 | - All other attributes are passed to the outer `div` tag.
26 |
27 | See [https://bitcrowd.github.io/bitstyles/?path=/docs/ui-flashes--flash-brand-1](https://bitcrowd.github.io/bitstyles/?path=/docs/ui-flashes--flash-brand-1)
28 | """
29 |
30 | story(
31 | "Flash brand 1",
32 | """
33 | iex> assigns = %{}
34 | iex> render(~H\"""
35 | ...> <.ui_flash variant="brand-1">
36 | ...> Something you may be interested to hear
37 | ...>
38 | ...> \""")
39 | """,
40 | [
41 | "6.0.0": """
42 | \"""
43 |
181 | <%= if assigns[:overlay] && Map.get(assigns[:overlay], :inner_block), do: render_slot(@overlay) %>
182 |
183 | <.ui_content role="document" {@content_extra}>
184 | <%= if assigns[:content], do: render_slot(@content), else: render_slot(@inner_block) %>
185 |
186 |
44 |
48 | \"""
49 | """,
50 | "5.0.1": """
51 | \"""
52 |
45 | Something you may be interested to hear
46 |
47 |
53 |
57 | \"""
58 | """
59 | ],
60 | width: "100%"
61 | )
62 |
63 | story(
64 | "Flash success",
65 | """
66 | iex> assigns = %{}
67 | iex> render(~H\"""
68 | ...> <.ui_flash variant="positive">
69 | ...> Saved successfully
70 | ...>
71 | ...> \""")
72 | """,
73 | """
74 | \"""
75 |
54 | Something you may be interested to hear
55 |
56 |
76 |
80 | \"""
81 | """,
82 | width: "100%"
83 | )
84 |
85 | story(
86 | "Flash warning",
87 | """
88 | iex> assigns = %{}
89 | iex> render(~H\"""
90 | ...> <.ui_flash variant="warning">
91 | ...> Saved with errors
92 | ...>
93 | ...> \""")
94 | """,
95 | """
96 | \"""
97 |
77 | Saved successfully
78 |
79 |
98 |
102 | \"""
103 | """,
104 | width: "100%"
105 | )
106 |
107 | story(
108 | "Flash danger",
109 | """
110 | iex> assigns = %{}
111 | iex> render(~H\"""
112 | ...> <.ui_flash variant="danger">
113 | ...> Saving failed
114 | ...>
115 | ...> \""")
116 | """,
117 | """
118 | \"""
119 |
99 | Saved with errors
100 |
101 |
120 |
124 | \"""
125 | """,
126 | width: "100%"
127 | )
128 |
129 | story(
130 | "Flash with full content",
131 | """
132 | iex> assigns = %{}
133 | iex> render(~H\"""
134 | ...> <.ui_flash variant={[:danger, :full]}>
135 | ...> Saving failed
136 | ...>
137 | ...> \""")
138 | """,
139 | """
140 | \"""
141 |
121 | Saving failed
122 |
123 |
142 |
146 | \"""
147 | """,
148 | width: "100%"
149 | )
150 |
151 | story(
152 | "Custom attributes and classes",
153 | """
154 | iex> assigns = %{}
155 | iex> render(~H\"""
156 | ...> <.ui_flash variant="brand-1" data-foo="bar" class="extra-class" content_class="extra-inner-class">
157 | ...> Saving failed
158 | ...>
159 | ...> \""")
160 | """,
161 | """
162 | \"""
163 |
143 | Saving failed
144 |
145 |
164 |
168 | \"""
169 | """,
170 | width: "100%"
171 | )
172 |
173 | @content_variants [:full, "full"]
174 |
175 | def ui_flash(assigns) do
176 | variants = assigns[:variant] |> List.wrap()
177 |
178 | {content_variants, flash_variants} =
179 | Enum.split_with(variants, &Enum.member?(@content_variants, &1))
180 |
181 | extra = assigns_to_attributes(assigns, [:class, :content_class, :variant])
182 |
183 | {variant_class, extra} =
184 | if Bitstyles.Version.version() >= {6, 0, 0} do
185 | {nil, Keyword.put_new(extra, :"data-theme", Enum.at(flash_variants, 0))}
186 | else
187 | {flash_variants |> Enum.map_join(" ", &"a-flash--#{&1}"), extra}
188 | end
189 |
190 | class =
191 | classnames([
192 | "u-padding-l1-y a-flash",
193 | variant_class,
194 | assigns[:class]
195 | ])
196 |
197 | content_class = classnames(["u-flex u-items-center u-font-medium", assigns[:content_class]])
198 |
199 | assigns =
200 | assign(assigns,
201 | class: class,
202 | content_class: content_class,
203 | extra: extra,
204 | content_variants: content_variants
205 | )
206 |
207 | ~H"""
208 |
165 | Saving failed
166 |
167 |
209 | <.ui_content variant={@content_variants} class={@content_class}>
210 | <%= render_slot(@inner_block) %>
211 |
212 |
213 | """
214 | end
215 | end
216 |
--------------------------------------------------------------------------------
/lib/bitstyles_phoenix/alpine3/dropdown.ex:
--------------------------------------------------------------------------------
1 | defmodule BitstylesPhoenix.Alpine3.Dropdown do
2 | use BitstylesPhoenix.Component
3 |
4 | alias BitstylesPhoenix.Component.Dropdown, as: RawDropdown
5 |
6 | @moduledoc """
7 | Components for rendering a dropdown menu powered by Alpine 3.
8 | """
9 |
10 | @doc """
11 | Renders a dropdown component with a button, a menu and options with Alpine3.
12 |
13 | Supports all attributes and slots from `BitstylesPhoenix.Component.Dropdown.ui_dropdown`.
14 |
15 | ## Attributes
16 | - `x_name` - The name of the boolean x-data property for alpine to store the menu state.
17 | Defaults to `dropdownOpen`.
18 |
19 | ## Prevent page-flickering
20 |
21 | The dropdown sets the `x-cloak` property on the menu to avoid flickering on initial page load.
22 | To make this work, you need to add the following snippet to your stylesheets:
23 |
24 | [x-cloak] { display: none !important; }
25 |
26 | See https://alpinejs.dev/directives/cloak for more information on `x-cloak`.
27 | """
28 |
29 | story(
30 | "Dropdown with alpine",
31 | """
32 | iex> assigns = %{}
33 | ...> render ~H\"""
34 | ...> <.ui_js_dropdown>
35 | ...> <:button label="Select me"/>
36 | ...> <:menu>
37 | ...> <.ui_dropdown_option href="#" class="u-h6">
38 | ...> Option 1
39 | ...>
40 | ...> <.ui_dropdown_option href="#" class="u-h6">
41 | ...> Option 2
42 | ...>
43 | ...>
44 | ...>
45 | ...> \"""
46 | """,
47 | """
48 | \"""
49 |
50 |
59 |
72 | \"""
73 | """,
74 | extra_html: """
75 |
76 |
81 | """,
82 | height: "200px"
83 | )
84 |
85 | story(
86 | "Custom x-data name and icon file",
87 | """
88 | iex> assigns = %{}
89 | ...> render ~H\"""
90 | ...> <.ui_js_dropdown x_name="myOwnDropDown">
91 | ...> <:button label="Select me" icon_file="assets/icons.svg"/>
92 | ...> <:menu>
93 | ...> <.ui_dropdown_option href="#" class="u-h6">
94 | ...> Option 1
95 | ...>
96 | ...> <.ui_dropdown_option href="#" class="u-h6">
97 | ...> Option 2
98 | ...>
99 | ...>
100 | ...>
101 | ...> \"""
102 | """,
103 | """
104 | \"""
105 | -
60 |
- 61 | 62 | Option 1 63 | 64 | 65 |
- 66 | 67 | Option 2 68 | 69 | 70 |
106 |
115 |
128 | \"""
129 | """,
130 | extra_html: """
131 |
132 | """,
133 | height: "200px"
134 | )
135 |
136 | def ui_js_dropdown(assigns) do
137 | {_button, button_extra} = assigns_from_single_slot(assigns, :button)
138 |
139 | {_menu, menu_extra} = assigns_from_single_slot(assigns, :menu)
140 |
141 | extra = assigns_to_attributes(assigns, [:menu, :button, :x_name])
142 |
143 | assigns =
144 | assigns
145 | |> assign(extra: extra, button_extra: button_extra, menu_extra: menu_extra)
146 | |> assign_new(:x_name, fn -> "dropdownOpen" end)
147 |
148 | ~H"""
149 | -
116 |
- 117 | 118 | Option 1 119 | 120 | 121 |
- 122 | 123 | Option 2 124 | 125 | 126 |
-
24 |
- 26 | Length 27 | 28 |
- 29 | 8 30 | 31 |
- 34 | Inserted at 35 | 36 |
- 37 | 2007-01-02 38 | 39 |
25 |
32 |
33 |
40 | -
46 |
- 48 | Length 49 | 50 |
- 51 | 8 52 | 53 |
- 56 | Inserted at 57 | 58 |
- 59 | 2007-01-02 60 | 61 |
47 |
54 |
55 |
62 | Tag83 | ...> <.ui_dd>Value 84 | ...> 85 | ...> 86 | ...> \""" 87 | """, 88 | """ 89 | \""" 90 |
-
91 |
- 93 | Length 94 | 95 |
- 96 | 8 97 | 98 |
- 101 | Some 102 | 103 |
- 104 | Tag 105 | 106 |
-
109 |
110 | Tag 111 |
112 |
113 | - 114 | Value 115 | 116 |
92 |
99 |
100 |
107 |
108 |
117 | -
142 | <%= render_slot(@inner_block) %>
143 |
177 | <%= if assigns[:label] do %>
178 | <.ui_dt><%= @label %>
179 | <.ui_dd><%= assigns[:value] || render_slot(@inner_block) %>
180 | <% else %>
181 | <%= render_slot(@inner_block) %>
182 | <% end %>
183 |
184 | """
185 | end
186 |
187 | @doc ~s"""
188 | Render a dt tag for usage with `ui_dl_item/1`.
189 |
190 | ## Attributes
191 |
192 | - `class` - Extra classes to pass to the `dt` tag.
193 | See `BitstylesPhoenix.Helper.classnames/1` for usage.
194 | - All other attributes are passed to the `dt` tag.
195 | """
196 |
197 | def ui_dt(assigns) do
198 | extra = assigns_to_attributes(assigns, [:class])
199 | assigns = assign(assigns, extra: extra)
200 |
201 | ~H"""
202 | #{title}
135 |Bitstyles versions
136 |-
137 | #{versions_links}
138 |