diff --git a/.formatter.exs b/.formatter.exs index d2cda26..dc75863 100644 --- a/.formatter.exs +++ b/.formatter.exs @@ -1,4 +1,11 @@ # Used by "mix format" [ - inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"] + plugins: [TailwindFormatter, Phoenix.LiveView.HTMLFormatter], + inputs: [ + "{mix,.formatter}.exs", + "{config,lib,test}/**/*.{ex,exs}", + "*.{heex,ex,exs}", + "priv/*/seeds.exs", + "{config,lib,test}/**/*.{heex,ex,exs}" + ] ] diff --git a/CHANGELOG b/CHANGELOG index cdc061c..01aba23 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -2,6 +2,17 @@ All notable changes to the "Bloom" project will be documented in this file. +### [0.0.7] - 2024-05-01 + +#### Added + +- Avatar component +- Ability to add JS to components + +#### Changed + +- Utilising @doc from components in Storybook + ### [0.0.6] - 2024-05-01 #### Changed diff --git a/bloom_site/lib/bloom_site_web/components/avatar.ex b/bloom_site/lib/bloom_site_web/components/avatar.ex new file mode 100644 index 0000000..44f2ca5 --- /dev/null +++ b/bloom_site/lib/bloom_site_web/components/avatar.ex @@ -0,0 +1,61 @@ +defmodule BloomSiteWeb.Components.Avatar do + use Phoenix.Component + + @doc """ + Avatar component using https://avatars.dicebear.com styles. + + Can be overridden by an image URL. + + Styles available: + Adventurer + Adventurer Neutral + Avataaars + Avataaars Neutral + Big Ears + Big Ears Neutral + Big Smile + Bottts + Bottts Neutral + Croodles + Croodles Neutral + Fun Emoji + Icons + Identicon + Initials + Lorelei + Lorelei Neutral + Micah + Miniavs + Notionists + Notionists Neutral + Open Peeps + Personas + Pixel Art + Pixel Art Neutral + Rings + Shapes + Thumbs + """ + +attr(:name, :string, required: true, doc: "Name for avatar and seed for dicebear API") +attr(:style, :string, default: "miniavs", doc: "Style for dicebear API") +attr(:img_src, :string, required: false, doc: "Image URL - overrides dicebear API") +attr(:class, :string, default: "", doc: "CSS class for parent div") +attr(:rest, :global) + +def avatar(assigns) do + image = + assigns[:img_src] || + "https://api.dicebear.com/8.x/#{assigns[:style]}/svg?seed=#{assigns[:name]}" + + ~H""" +
+ {"#{@name} +
+ """ + end +end diff --git a/bloom_site/lib/bloom_site_web/components/bento_grid.ex b/bloom_site/lib/bloom_site_web/components/bento_grid.ex index fa8dd79..8c05ded 100644 --- a/bloom_site/lib/bloom_site_web/components/bento_grid.ex +++ b/bloom_site/lib/bloom_site_web/components/bento_grid.ex @@ -1,7 +1,7 @@ defmodule BloomSiteWeb.Components.BentoGrid do use Phoenix.Component - @moduledoc """ + @doc """ Bento grid component with bento cards. See `bento_card/1` for usage. diff --git a/bloom_site/lib/bloom_site_web/components/card.ex b/bloom_site/lib/bloom_site_web/components/card.ex index a10dbf2..a7d903f 100644 --- a/bloom_site/lib/bloom_site_web/components/card.ex +++ b/bloom_site/lib/bloom_site_web/components/card.ex @@ -1,7 +1,7 @@ defmodule BloomSiteWeb.Components.Card do use Phoenix.Component - @moduledoc """ + @doc """ Card component """ diff --git a/bloom_site/lib/bloom_site_web/components/code_snippet.ex b/bloom_site/lib/bloom_site_web/components/code_snippet.ex index 8fe4cd4..fd2f671 100644 --- a/bloom_site/lib/bloom_site_web/components/code_snippet.ex +++ b/bloom_site/lib/bloom_site_web/components/code_snippet.ex @@ -1,7 +1,7 @@ defmodule BloomSiteWeb.Components.CodeSnippet do use Phoenix.Component - @moduledoc """ + @doc """ Code snippet component """ diff --git a/bloom_site/lib/bloom_site_web/components/core_components.ex b/bloom_site/lib/bloom_site_web/components/core_components.ex index 31c2ab0..edb4201 100644 --- a/bloom_site/lib/bloom_site_web/components/core_components.ex +++ b/bloom_site/lib/bloom_site_web/components/core_components.ex @@ -1,5 +1,5 @@ defmodule BloomSiteWeb.CoreComponents do - @moduledoc """ + @doc """ Provides core UI components. At the first glance, this module may seem daunting, but its goal is diff --git a/bloom_site/lib/bloom_site_web/components/gradient_text.ex b/bloom_site/lib/bloom_site_web/components/gradient_text.ex index 0a23960..662d881 100644 --- a/bloom_site/lib/bloom_site_web/components/gradient_text.ex +++ b/bloom_site/lib/bloom_site_web/components/gradient_text.ex @@ -1,7 +1,7 @@ defmodule BloomSiteWeb.Components.GradientText do use Phoenix.Component - @moduledoc """ + @doc """ Gradient text component """ diff --git a/bloom_site/lib/bloom_site_web/components/hero.ex b/bloom_site/lib/bloom_site_web/components/hero.ex index 7b501f1..c24f793 100644 --- a/bloom_site/lib/bloom_site_web/components/hero.ex +++ b/bloom_site/lib/bloom_site_web/components/hero.ex @@ -1,7 +1,7 @@ defmodule BloomSiteWeb.Components.Hero do use Phoenix.Component - @moduledoc """ + @doc """ Hero component """ diff --git a/bloom_site/lib/bloom_site_web/components/layouts/app.html.heex b/bloom_site/lib/bloom_site_web/components/layouts/app.html.heex index da8301f..f2c36bc 100644 --- a/bloom_site/lib/bloom_site_web/components/layouts/app.html.heex +++ b/bloom_site/lib/bloom_site_web/components/layouts/app.html.heex @@ -5,11 +5,13 @@

- v0.0.6 + v0.0.7

- + <.link navigate="/showcase" class="hover:text-zinc-700">Showcase + <.link navigate="/storybook" class="hover:text-zinc-700">Docs + <.link href="https://github.com/chrisgreg/bloom" class="hover:text-zinc-700 w-8"> - +
-
+
<.flash_group flash={@flash} /> <%= @inner_content %>
diff --git a/bloom_site/lib/bloom_site_web/components/marquee.ex b/bloom_site/lib/bloom_site_web/components/marquee.ex index 376fc98..baef35d 100644 --- a/bloom_site/lib/bloom_site_web/components/marquee.ex +++ b/bloom_site/lib/bloom_site_web/components/marquee.ex @@ -1,7 +1,7 @@ defmodule BloomSiteWeb.Components.Marquee do use Phoenix.Component - @moduledoc """ + @doc """ Marquee component Sliding carousel of images that can go backwards and forwards. diff --git a/bloom_site/lib/bloom_site_web/live/landing_live.ex b/bloom_site/lib/bloom_site_web/live/landing_live.ex index 7b62640..7025507 100644 --- a/bloom_site/lib/bloom_site_web/live/landing_live.ex +++ b/bloom_site/lib/bloom_site_web/live/landing_live.ex @@ -7,6 +7,7 @@ defmodule BloomSiteWeb.LandingLive do import BloomSiteWeb.Components.BentoGrid import BloomSiteWeb.Components.Marquee import BloomSiteWeb.Components.Card + import BloomSiteWeb.Components.Avatar def mount(_params, _session, socket) do {:ok, socket} diff --git a/bloom_site/lib/bloom_site_web/live/landing_live.html.heex b/bloom_site/lib/bloom_site_web/live/landing_live.html.heex index 3bf341c..d86a6d3 100644 --- a/bloom_site/lib/bloom_site_web/live/landing_live.html.heex +++ b/bloom_site/lib/bloom_site_web/live/landing_live.html.heex @@ -1,419 +1,462 @@ -<.hero class="max-w-4xl text-pretty"> - - <.gradient_text from_color="rose-400" to_color="purple-500">Bloom - <:subtitle> - The opinionated, open-source extension to Phoenix Core Components.
- Install a copy of each component using the mix command in seconds.
- Yours to edit and customise. - - <:actions> -
- <.link href="/storybook"> - <.glow_button> - View Components & Storybook - - - <.link href="https://github.com/chrisgreg/bloom"> - <.glow_button from_color="white" to_color="white" class="hover:bg-zinc-700"> - Github - - -
- - +
+ <.hero class="max-w-4xl text-pretty"> + + <.gradient_text from_color="rose-400" to_color="purple-500">Bloom + <:subtitle> + The opinionated, open-source extension to Phoenix Core Components.
+ Install a copy of each component using the mix command in seconds.
+ Yours to edit and customise. + + <:actions> +
+ <.link href="/storybook"> + <.glow_button> + View Components & Storybook + + + <.link href="https://github.com/chrisgreg/bloom"> + <.glow_button from_color="white" to_color="white" class="hover:bg-zinc-700"> + Github + + +
+ + -
- - - - - - - + + + + + - - - - + + + - - - - + + + - - - - + + + - - - - + + + - - - - + + + - - - - - - - - + + + - - - - - -
- -

- <.gradient_text> - Use in seconds - -

- Install the dependency, use the mix task, customise, use. -

-

+ + + + + + + + + + + + + -
- <.code_snippet> - defp deps do - [ - {:bloom, "~> 0.0.6"}, - ] - end - - <.code_snippet> - mix bloom.install code_snippet - -
+

+ <.gradient_text> + Use in seconds + +

+ Install the dependency, use the mix task, customise, use. +

+

-

- <.gradient_text> - Look, a bento grid Phoenix Component! - -

- For showing off features, or just for fun. -

-

+
+ <.code_snippet> + defp deps do + [ + {:bloom, "~> 0.0.7"}, + ] + end + + <.code_snippet> + mix bloom.install code_snippet + +
-<.bento_grid> - <.bento_card - name="Calendar Item" - icon="hero-calendar" - description="All the components in Bloom." - row_start={1} - row_end={3} - col_start={1} - col_end={2} - > - <.button class="border-white text-white font-medium text-xs items-center gap-2 flex flex-row"> - Here's a button <.icon name="hero-arrow-right" class="h-4 w-4" /> - - - <.bento_card - name="Bell Bento" - icon="hero-bell" - description="All the components in Bloom." - row_start={1} - row_end={1} - col_start={2} - col_end={4} - > - <.button class="border-white text-white font-semibold"> - Here's a button - - - <.bento_card - name="Some sort of hat" - icon="hero-academic-cap" - description="All the components in Bloom." - row_start={3} - row_end={4} - col_start={1} - col_end={2} - > - <.button class="border-white text-white font-semibold"> - Here's a button - - - <.bento_card - name="Cloud Infrastructure" - icon="hero-cloud" - description="All the components in Bloom." - row_start={2} - row_end={4} - col_start={2} - col_end={3} - > - <.button class="border-white text-white font-semibold"> - Here's a button - - - <.bento_card - name="Tournament" - icon="hero-trophy" - description="All the components in Bloom." - row_start={2} - row_end={4} - col_start={3} - col_end={4} - > - <.button class="border-white text-white font-semibold"> - Here's a button - - - +

+ <.gradient_text> + Avatars! Avatars! + +

+ From dicebear.fm (or your own images) +

+

-

- <.gradient_text> - Marquee & Card Components - -

- Think social proof, showing company logos, and more. -

-

-
- <.marquee repeat={5} vertical={false} pause_on_hover={true} reverse={true}> - <.card - image="https://picsum.photos/64" - title="Jack" - subheading="@faketwitter" - body="This is so cool." - /> - <.card - image="https://picsum.photos/64" - title="Chris" - subheading="@codestirring" - body="Whoa, it's like shadcn for Elixir and Phoenix!" - /> - <.card - image="https://picsum.photos/64" - title="Rhiannon" - subheading="@rhiality" - body="Just run mix bloom.install card" - /> - - <.marquee repeat={5} vertical={false} pause_on_hover={true} reverse={false}> - <.card - image="https://picsum.photos/64" - title="Penny" - subheading="@widmore4eva" - body="I love that I can customise each component 🤩" - /> - <.card - image="https://picsum.photos/64" - title="Desmond" - subheading="@hatchlover" - body="This will save me so much time!" - /> - <.card - image="https://picsum.photos/64" - title="Ben Linus" - subheading="@jacob_fan_23" - body="Open source so anyone can use it for free!" - /> - -
-
-
+
+ <.avatar name="Alice" style="adventurer" /> + <.avatar name="Bob" style="adventurer-neutral" /> + <.avatar name="Charlie" style="avataaars" /> + <.avatar name="Diana" style="avataaars-neutral" /> + <.avatar name="Ethan" style="big-ears" /> + <.avatar name="Fiona" style="big-ears-neutral" /> + <.avatar name="George" style="big-smile" /> + <.avatar name="Hannah" style="bottts" /> + <.avatar name="Ian" style="bottts-neutral" /> + <.avatar name="Julia" style="croodles" /> + <.avatar name="Kevin" style="croodles-neutral" /> + <.avatar name="Liam" style="fun-emoji" /> + <.avatar name="Mia" style="icons" /> + <.avatar name="Noah" style="identicon" /> + <.avatar name="Olivia" style="initials" /> + <.avatar name="Parker" style="lorelei" /> + <.avatar name="Quinn" style="lorelei-neutral" /> + <.avatar name="Ruby" style="micah" /> + <.avatar name="Sam" style="miniavs" /> + <.avatar name="Tina" style="notionists" /> + <.avatar name="Umar" style="notionists-neutral" /> + <.avatar name="Violet" style="open-peeps" /> + <.avatar name="Will" style="personas" /> + <.avatar name="Xena" style="pixel-art" /> + <.avatar name="Yara" style="pixel-art-neutral" /> + <.avatar name="Zack" style="rings" /> + <.avatar name="Amelia" style="shapes" /> + <.avatar name="Ben" style="thumbs" /> + <.avatar name="Ben" img_src="https://picsum.photos/64" />
-
-
-

- <.gradient_text from_color="rose-400" to_color="purple-500" class="font-semibold text-3xl"> - Missing a component you want? This is Open Source! +

+ <.gradient_text> + Look, a bento grid Phoenix Component! +

+ For showing off features, or just for fun. +

- <.link href="https://github.com/chrisgreg/bloom/issues"> - <.button class="border-white w-fit mx-auto px-6 py-4 flex flex-row gap-2 items-center text-white text-lg"> - Request or add components here <.icon name="hero-arrow-right" class="h-6 w-6" /> - - -
-
-
-
- - Twitter - - - - GitHub - - -
-

- © 2024 - made by - - Chris Gregori - + <.bento_grid> + <.bento_card + name="Calendar Item" + icon="hero-calendar" + description="All the components in Bloom." + row_start={1} + row_end={3} + col_start={1} + col_end={2} + > + <.button class="border-white text-white font-medium text-xs items-center gap-2 flex flex-row"> + Here's a button <.icon name="hero-arrow-right" class="h-4 w-4" /> + + + <.bento_card + name="Bell Bento" + icon="hero-bell" + description="All the components in Bloom." + row_start={1} + row_end={1} + col_start={2} + col_end={4} + > + <.button class="border-white text-white font-semibold"> + Here's a button + + + <.bento_card + name="Some sort of hat" + icon="hero-academic-cap" + description="All the components in Bloom." + row_start={3} + row_end={4} + col_start={1} + col_end={2} + > + <.button class="border-white text-white font-semibold"> + Here's a button + + + <.bento_card + name="Cloud Infrastructure" + icon="hero-cloud" + description="All the components in Bloom." + row_start={2} + row_end={4} + col_start={2} + col_end={3} + > + <.button class="border-white text-white font-semibold"> + Here's a button + + + <.bento_card + name="Tournament" + icon="hero-trophy" + description="All the components in Bloom." + row_start={2} + row_end={4} + col_start={3} + col_end={4} + > + <.button class="border-white text-white font-semibold"> + Here's a button + + + + +

+ <.gradient_text> + Marquee & Card Components + +

+ Think social proof, showing company logos, and more.

+

+
+ <.marquee repeat={5} vertical={false} pause_on_hover={true} reverse={true}> + <.card + image="https://picsum.photos/64" + title="Jack" + subheading="@faketwitter" + body="This is so cool." + /> + <.card + image="https://picsum.photos/64" + title="Chris" + subheading="@codestirring" + body="Whoa, it's like shadcn for Elixir and Phoenix!" + /> + <.card + image="https://picsum.photos/64" + title="Rhiannon" + subheading="@rhiality" + body="Just run mix bloom.install card" + /> + + <.marquee repeat={5} vertical={false} pause_on_hover={true} reverse={false}> + <.card + image="https://picsum.photos/64" + title="Penny" + subheading="@widmore4eva" + body="I love that I can customise each component 🤩" + /> + <.card + image="https://picsum.photos/64" + title="Desmond" + subheading="@hatchlover" + body="This will save me so much time!" + /> + <.card + image="https://picsum.photos/64" + title="Ben Linus" + subheading="@jacob_fan_23" + body="Open source so anyone can use it for free!" + /> + +
+
+
+
-
+ +
+

+ <.gradient_text from_color="rose-400" to_color="purple-500" class="font-semibold text-3xl"> + Missing a component you want? This is Open Source! + +

+ <.link href="https://github.com/chrisgreg/bloom/issues"> + <.button class="border-white w-fit mx-auto px-6 py-4 flex flex-row gap-2 items-center text-white text-lg"> + Request or add components here <.icon name="hero-arrow-right" class="h-6 w-6" /> + + +
+ +
+
+
+ + Twitter + + + + GitHub + + +
+

+ © 2024 - made by + + Chris Gregori + +

+
+
+
\ No newline at end of file diff --git a/bloom_site/lib/bloom_site_web/live/showcase_live.ex b/bloom_site/lib/bloom_site_web/live/showcase_live.ex new file mode 100644 index 0000000..715c15c --- /dev/null +++ b/bloom_site/lib/bloom_site_web/live/showcase_live.ex @@ -0,0 +1,57 @@ +defmodule BloomSiteWeb.ShowcaseLive do + use BloomSiteWeb, :live_view + import Phoenix.Component + import BloomSiteWeb.Components.Hero + import BloomSiteWeb.Components.GradientText + + def mount(_params, _session, socket) do + {:ok, socket} + end + + def render(assigns) do + ~H""" +
+ <.hero> + <.gradient_text from_color="rose-400" to_color="purple-500">Showcase + <:subtitle> + Some Phoenix projects using Bloom components + + +
+ +
+
+
+ <.showcase_entry image_url="/images/showcase/uini.png" url="https://uini.io?utm_source=bloom"> + <:name>Uini + <:description>AI-powered user-research tool + + <.showcase_entry image_url="/images/showcase/mealmind.png" url="https://mealmind.io?utm_source=bloom"> + <:name>mealmind + <:description>AI-powered meal planning + +
+
+
+ """ + end + + attr(:image_url, :string, required: true) + slot(:name, required: true) + slot(:description, required: true) + defp showcase_entry(assigns) do + ~H""" +
+ + +
+

+ <%= render_slot(@name) %> +

+

<%= render_slot(@description) %>

+
+ +
+ """ + end +end diff --git a/bloom_site/lib/bloom_site_web/router.ex b/bloom_site/lib/bloom_site_web/router.ex index 8a98739..849eb91 100644 --- a/bloom_site/lib/bloom_site_web/router.ex +++ b/bloom_site/lib/bloom_site_web/router.ex @@ -23,6 +23,7 @@ defmodule BloomSiteWeb.Router do pipe_through :browser live "/", LandingLive, :home + live "/showcase", ShowcaseLive live_storybook("/storybook", backend_module: Elixir.BloomSiteWeb.Storybook) end diff --git a/bloom_site/mix.exs b/bloom_site/mix.exs index 86eaa6d..3f36fdf 100644 --- a/bloom_site/mix.exs +++ b/bloom_site/mix.exs @@ -54,7 +54,8 @@ defmodule BloomSite.MixProject do {:gettext, "~> 0.20"}, {:jason, "~> 1.2"}, {:plug_cowboy, "~> 2.5"}, - {:bloom, "~> 0.0.6"}, + {:bloom, "~> 0.0.7"}, + # {:bloom, path: "..", override: true}, {:phoenix_storybook, "~> 0.6.0"} ] end diff --git a/bloom_site/priv/static/images/showcase/mealmind.png b/bloom_site/priv/static/images/showcase/mealmind.png new file mode 100644 index 0000000..fd2a840 Binary files /dev/null and b/bloom_site/priv/static/images/showcase/mealmind.png differ diff --git a/bloom_site/priv/static/images/showcase/uini.png b/bloom_site/priv/static/images/showcase/uini.png new file mode 100644 index 0000000..188e609 Binary files /dev/null and b/bloom_site/priv/static/images/showcase/uini.png differ diff --git a/bloom_site/storybook/bloom_components/avatar.story.exs b/bloom_site/storybook/bloom_components/avatar.story.exs new file mode 100644 index 0000000..04d4904 --- /dev/null +++ b/bloom_site/storybook/bloom_components/avatar.story.exs @@ -0,0 +1,53 @@ +defmodule BloomSite.Storybook.BloomComponents.Avatar do + use PhoenixStorybook.Story, :example + import BloomSiteWeb.Components.Avatar + + def function, do: &BloomSiteWeb.Components.Avatar.avatar/1 + def imports, do: [{BloomSiteWeb.Components.Avatar, [avatar: 1]}] + + @impl true + def render(assigns) do + ~H""" +

Due to an issue with Phoenix Storybook - I cannot render a proper story for avatar components - see https://github.com/phenixdigital/phoenix_storybook/issues/205

+ +

Dicebear Styles

+
+ <.avatar name="Alice" style="adventurer" /> + <.avatar name="Bob" style="adventurer-neutral" /> + <.avatar name="Charlie" style="avataaars" /> + <.avatar name="Diana" style="avataaars-neutral" /> + <.avatar name="Ethan" style="big-ears" /> + <.avatar name="Fiona" style="big-ears-neutral" /> + <.avatar name="George" style="big-smile" /> + <.avatar name="Hannah" style="bottts" /> + <.avatar name="Ian" style="bottts-neutral" /> + <.avatar name="Julia" style="croodles" /> + <.avatar name="Kevin" style="croodles-neutral" /> + <.avatar name="Liam" style="fun-emoji" /> + <.avatar name="Mia" style="icons" /> + <.avatar name="Noah" style="identicon" /> + <.avatar name="Olivia" style="initials" /> + <.avatar name="Parker" style="lorelei" /> + <.avatar name="Quinn" style="lorelei-neutral" /> + <.avatar name="Ruby" style="micah" /> + <.avatar name="Sam" style="miniavs" /> + <.avatar name="Tina" style="notionists" /> + <.avatar name="Umar" style="notionists-neutral" /> + <.avatar name="Violet" style="open-peeps" /> + <.avatar name="Will" style="personas" /> + <.avatar name="Xena" style="pixel-art" /> + <.avatar name="Yara" style="pixel-art-neutral" /> + <.avatar name="Zack" style="rings" /> + <.avatar name="Amelia" style="shapes" /> + <.avatar name="Ben" style="thumbs" /> +
+ +

Supplied Image URL Style

+
+ <.avatar name="Ben" img_src="https://picsum.photos/64" /> +
+ """ + end + + +end diff --git a/bloom_site/storybook/bloom_components/marquee.story.exs b/bloom_site/storybook/bloom_components/marquee.story.exs index f2c6db6..5414c59 100644 --- a/bloom_site/storybook/bloom_components/marquee.story.exs +++ b/bloom_site/storybook/bloom_components/marquee.story.exs @@ -4,7 +4,6 @@ defmodule BloomSite.Storybook.BloomComponents.Marquee do def function, do: &BloomSiteWeb.Components.Marquee.marquee/1 def imports, do: [{BloomSiteWeb.Components.Card, [card: 1]}] - def variations do [ %Variation{ diff --git a/bloom_site/storybook/examples/bloom_components_landing.story.exs b/bloom_site/storybook/examples/bloom_components_landing.story.exs index 12976f4..ee6f150 100644 --- a/bloom_site/storybook/examples/bloom_components_landing.story.exs +++ b/bloom_site/storybook/examples/bloom_components_landing.story.exs @@ -5,6 +5,7 @@ defmodule Storybook.Examples.BloomComponentsLanding do import BloomSiteWeb.Components.Hero import BloomSiteWeb.Components.GradientText import BloomSiteWeb.Components.BentoGrid + import BloomSiteWeb.Components.Avatar import BloomSiteWeb.CoreComponents def doc do @@ -43,6 +44,38 @@ defmodule Storybook.Examples.BloomComponentsLanding do
+
+ <.avatar name="Alice" style="adventurer" /> + <.avatar name="Bob" style="adventurer-neutral" /> + <.avatar name="Charlie" style="avataaars" /> + <.avatar name="Diana" style="avataaars-neutral" /> + <.avatar name="Ethan" style="big-ears" /> + <.avatar name="Fiona" style="big-ears-neutral" /> + <.avatar name="George" style="big-smile" /> + <.avatar name="Hannah" style="bottts" /> + <.avatar name="Ian" style="bottts-neutral" /> + <.avatar name="Julia" style="croodles" /> + <.avatar name="Kevin" style="croodles-neutral" /> + <.avatar name="Liam" style="fun-emoji" /> + <.avatar name="Mia" style="icons" /> + <.avatar name="Noah" style="identicon" /> + <.avatar name="Olivia" style="initials" /> + <.avatar name="Parker" style="lorelei" /> + <.avatar name="Quinn" style="lorelei-neutral" /> + <.avatar name="Ruby" style="micah" /> + <.avatar name="Sam" style="miniavs" /> + <.avatar name="Tina" style="notionists" /> + <.avatar name="Umar" style="notionists-neutral" /> + <.avatar name="Violet" style="open-peeps" /> + <.avatar name="Will" style="personas" /> + <.avatar name="Xena" style="pixel-art" /> + <.avatar name="Yara" style="pixel-art-neutral" /> + <.avatar name="Zack" style="rings" /> + <.avatar name="Amelia" style="shapes" /> + <.avatar name="Ben" style="thumbs" /> + <.avatar name="Ben" img_src="https://picsum.photos/64" /> +
+ <.bento_grid class="grid-rows-4 grid-cols-3"> <.bento_card name="Calendar Item" diff --git a/bloom_site/storybook/welcome.story.exs b/bloom_site/storybook/welcome.story.exs index 0177862..40cec1a 100644 --- a/bloom_site/storybook/welcome.story.exs +++ b/bloom_site/storybook/welcome.story.exs @@ -52,7 +52,7 @@ defmodule Storybook.MyPage do

Can be installed by adding bloom to your list of dependencies in mix.exs:

def deps do
         [
-          {:bloom, "~> 0.0.6"}
+          {:bloom, "~> 0.0.7"}
         ]
       end

Relies on Phoenix being installed.

diff --git a/lib/bloom/components/avatar.ex b/lib/bloom/components/avatar.ex new file mode 100644 index 0000000..84d78cd --- /dev/null +++ b/lib/bloom/components/avatar.ex @@ -0,0 +1,61 @@ +defmodule Bloom.Components.Avatar do + use Phoenix.Component + + @moduledoc """ + Avatar component using https://avatars.dicebear.com styles. + + Can be overridden by an image URL. + + Styles available: + Adventurer + Adventurer Neutral + Avataaars + Avataaars Neutral + Big Ears + Big Ears Neutral + Big Smile + Bottts + Bottts Neutral + Croodles + Croodles Neutral + Fun Emoji + Icons + Identicon + Initials + Lorelei + Lorelei Neutral + Micah + Miniavs + Notionists + Notionists Neutral + Open Peeps + Personas + Pixel Art + Pixel Art Neutral + Rings + Shapes + Thumbs + """ + + attr(:name, :string, required: true, doc: "Name for avatar and seed for dicebear API") + attr(:style, :string, default: "miniavs", doc: "Style for dicebear API") + attr(:img_src, :string, required: false, doc: "Image URL - overrides dicebear API") + attr(:class, :string, default: "", doc: "CSS class for parent div") + attr(:rest, :global) + + def avatar(assigns) do + image = + assigns[:img_src] || + "https://api.dicebear.com/8.x/#{assigns[:style]}/svg?seed=#{assigns[:name]}" + + ~H""" +
+ {"#{@name} +
+ """ + end +end diff --git a/lib/bloom/components/marquee.ex b/lib/bloom/components/marquee.ex index d70d460..d618c58 100644 --- a/lib/bloom/components/marquee.ex +++ b/lib/bloom/components/marquee.ex @@ -42,13 +42,6 @@ defmodule Bloom.Components.Marquee do slot(:inner_block, required: true) def marquee(assigns) do - assigns = - assigns - |> assign(:repeat, assigns[:repeat] || 4) - |> assign(:vertical, assigns[:vertical] || false) - |> assign(:pause_on_hover, assigns[:pause_on_hover] || false) - |> assign(:reverse, assigns[:reverse] || false) - ~H"""
0} diff --git a/lib/tasks/install.ex b/lib/tasks/install.ex index e09e01b..62ecdd4 100644 --- a/lib/tasks/install.ex +++ b/lib/tasks/install.ex @@ -81,7 +81,7 @@ defmodule Mix.Tasks.Bloom.Install do Mix.shell().info("Usage: mix bloom.install [component_name]") Mix.shell().info( - "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | sound_effect" + "Available components: avatar | glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | sound_effect" ) end diff --git a/mix.exs b/mix.exs index a2809b1..6291a4a 100644 --- a/mix.exs +++ b/mix.exs @@ -4,7 +4,7 @@ defmodule Bloom.MixProject do def project do [ app: :bloom, - version: "0.0.6", + version: "0.0.7", elixir: "~> 1.16", start_permanent: Mix.env() == :prod, deps: deps(), @@ -39,7 +39,8 @@ defmodule Bloom.MixProject do {:phoenix_live_view, "~> 0.20"}, {:phoenix_html, ">= 3.3.3"}, {:mox, "~> 1.0", only: :test}, - {:ex_doc, ">= 0.0.0", only: :dev, runtime: false} + {:ex_doc, ">= 0.0.0", only: :dev, runtime: false}, + {:tailwind_formatter, "~> 0.4.0", only: [:dev, :test], runtime: false} ] end end diff --git a/mix.lock b/mix.lock index f0e4d2c..e0330a9 100644 --- a/mix.lock +++ b/mix.lock @@ -16,6 +16,7 @@ "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"}, "plug": {:hex, :plug, "1.15.3", "712976f504418f6dff0a3e554c40d705a9bcf89a7ccef92fc6a5ef8f16a30a97", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "cc4365a3c010a56af402e0809208873d113e9c38c401cabd88027ef4f5c01fd2"}, "plug_crypto": {:hex, :plug_crypto, "2.0.0", "77515cc10af06645abbfb5e6ad7a3e9714f805ae118fa1a70205f80d2d70fe73", [:mix], [], "hexpm", "53695bae57cc4e54566d993eb01074e4d894b65a3766f1c43e2c61a1b0f45ea9"}, + "tailwind_formatter": {:hex, :tailwind_formatter, "0.4.0", "2aa6f391b3b6fe52a18fe75b75c76d541c3478a31bcfc1ebe987819fa32653bf", [:mix], [], "hexpm", "6465afc3e864937fcb477524be45a2d9d73a1b1ee904d85f1592b80dbcb0b741"}, "telemetry": {:hex, :telemetry, "1.2.1", "68fdfe8d8f05a8428483a97d7aab2f268aaff24b49e0f599faa091f1d4e7f61c", [:rebar3], [], "hexpm", "dad9ce9d8effc621708f99eac538ef1cbe05d6a874dd741de2e689c47feafed5"}, "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"}, "websock_adapter": {:hex, :websock_adapter, "0.5.6", "0437fe56e093fd4ac422de33bf8fc89f7bc1416a3f2d732d8b2c8fd54792fe60", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "e04378d26b0af627817ae84c92083b7e97aca3121196679b73c73b99d0d133ea"}, diff --git a/priv/templates/avatar.ex b/priv/templates/avatar.ex new file mode 100644 index 0000000..d40f90d --- /dev/null +++ b/priv/templates/avatar.ex @@ -0,0 +1,57 @@ +defmodule <%= @module_name %>Web.Components.Avatar do + use Phoenix.Component + + @moduledoc """ + Avatar component using https://avatars.dicebear.com styles. + + Can be overridden by an image URL. + + Styles available: + Adventurer + Adventurer Neutral + Avataaars + Avataaars Neutral + Big Ears + Big Ears Neutral + Big Smile + Bottts + Bottts Neutral + Croodles + Croodles Neutral + Fun Emoji + Icons + Identicon + Initials + Lorelei + Lorelei Neutral + Micah + Miniavs + Notionists + Notionists Neutral + Open Peeps + Personas + Pixel Art + Pixel Art Neutral + Rings + Shapes + Thumbs + """ + + attr(:name, :string, required: true, doc: "Name for avatar and seed for dicebear API") + attr(:style, :string, default: "miniavs", doc: "Style for dicebear API") + attr(:img_src, :string, required: false, doc: "Image URL - overrides dicebear API") + attr(:class, :string, default: "", doc: "CSS class for parent div") + attr(:rest, :global) + + def avatar(assigns) do + ~H""" +
+ {"#{@name} +
+ """ + end +end diff --git a/priv/templates/marquee.ex b/priv/templates/marquee.ex index 06da15c..a02847c 100644 --- a/priv/templates/marquee.ex +++ b/priv/templates/marquee.ex @@ -42,13 +42,6 @@ defmodule <%= @module_name %>Web.Components.Marquee do slot(:inner_block, required: true) def marquee(assigns) do - assigns = - assigns - |> assign(:repeat, assigns[:repeat] || 4) - |> assign(:vertical, assigns[:vertical] || false) - |> assign(:pause_on_hover, assigns[:pause_on_hover] || false) - |> assign(:reverse, assigns[:reverse] || false) - ~H"""
0} diff --git a/test/tasks/install_test.exs b/test/tasks/install_test.exs index a41ce9d..56a5a78 100644 --- a/test/tasks/install_test.exs +++ b/test/tasks/install_test.exs @@ -39,7 +39,7 @@ defmodule Mix.Tasks.Bloom.InstallTest do expect(ShellMock, :info, fn msg -> assert msg == - "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee" + "Available components: avatar | glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee" end) Mix.Tasks.Bloom.Install.run(["nonexistent_component"]) @@ -52,7 +52,7 @@ defmodule Mix.Tasks.Bloom.InstallTest do expect(ShellMock, :info, fn msg -> assert msg == - "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee" + "Available components: avatar | glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee" end) Mix.Tasks.Bloom.Install.run([])