Convert 0.0.1 basic components to eex templates for mix task (#52)

* Delete MishkaChelekomComponents import from all component * VIP - Add nil value for the props user does not send * Add list string in task output instead of nil * Add color and variant condition of accordion eex * Add accordion space and rounded options inside its eex conditions * VIP - Add none menu rounded conditions inside eex * Add size conditions inside accordion eex * Add padding conditions inside accordion eex * Add web_module to component task * Add variant inside alert component eex * Add color conditions for alert eex file * Add entries eex template of avatar * Add type conditions for avatar eex component * Add size, rounded and color conditions of avatar eex file * Add space condition of avatar's eex file * Add entry eex file of badge * Add variant condition of badge eex file * Add rounded, color and variant conditions of badge eex file * Add size condition of badge eex * Add banner entry eex file * Add padding and size conditions for banner eex file * Add space and rounded of banner eex file * Add variant condition pf banner eex file * Add color condition of banner eex file * Add entry file of blockquote eex * Add space condition of blockquote eex file * Add variant, padding and rounded of blockquote eex file * Add color condition of blockquote eex file * Add entry file of breadcrumb eex * Add size and color of breadcrumb eex file * Add entry file of button eex file * Add type of button eex file * Add varian condition of button eex file * Add color condition of button eex * Add rounded and size of button component eex file * Add entry file of card eex * Add all cli conditions of card eex file * Add entry eex file of carousel * Add eex condition of carousel * Add enrty eex file of chat * Add eex conditions of chat * Add entry eex file if checkbox * Add eex conditions of chekbox_field * Add entry eex file of color_field * Add color_field eex conditions * add entry eex file of date_time_field * Add eex condtion of date_time_field * Add entry eex file of device * Add color eex file of device * Add entry eex file of divider * Add divider eex file conditions * Add entry eex file of drawer * Add variant eex condition of drawer * Add color and variant eex file of drawer * Add eex entry file of dropdown * remove extra argument from dropdown size function (#53) * Add eex conditions of dropdown * Add eex entry file of email_field * Add size space and rounded conditions of email_field eex * Add email field eex variant condition * Add color condition of email_field eex * Add entry eex file of fieldset * Add size padding and round with variant of fieldset eex * Add eex color of fieldset * Add entry eex file of file_field * Add color variant round and space eex file of file_field * Add color condition of file_field eex * Add footer eex conditions * Add color condition of footer eex * Add eex of form wrapper * Add eex variant of form_wrapper * Add color condition of form_wrapper eex * Add entry eex file of gallery * Add eex file of gallery * Add eex file of image * Add eex file of indicator * Add eex file of input_field * Add entry eex file of jumbotron * Add some conditions of jumbotron eex file * Add variant condition of jumbotron eex file * Add color condition of jumbotron eex file * Add entry eex file of keyboard * Add variant and size, round in keybord eex file * Add color of keyboard eex * Add entry eex file of list component * Add some conditions of list eex file * Add color eex condition of list * Add entry eex file of mega_menu * Add variant, size and round space of mega menu eex file * Add color condition of mega menu eex * Add eex entry file of menu * Add size and space of menu eex file * Add entry eex file of modal * Add size condition eex of modal * Add variant of modal eex file * Add modal color eex file * Add entry eex file of native_select * Add variant size, space of native_select * Add color of native_select eex * Add entry eex file of navbar * Add size and round space of navbar eex file * Add variant of navbar eex * Add color of navbar eex * Add entry eex of number_field * Add size and round, space olf number_field * Add variant of number_field eex * Add color of number_field eex * Add entry eex file of overlay * Add color and size of overlay eex * Add entry eex file of pagination * VIP - change border function name of pagination eex * Add size and round of pagination eex * Add variant and size of pagination * Add color of pagination eex * Add entry eex file of password_field * Add size and space of password_field eex * Add variant of password_field eex * Add color of password_field eex * Add entry file of popover * Add type of popover eex * Add space and size of popover eex file * Add color of popover eex * Add entry eex file of progress * Add progress color for eex file * Add entry eex file of radio_field * Add color of radio_field eex * Add entry eex file of range_field * Add color of range_field * Add rating eex file entry level * Add size and color of rating eex * Add entry eex file of search_field * Add size, round and space of search_field eex * Add variant of search_field eex * Add color of search_field eex * Add entry eex file of sidebar * Add color of sidebar eex * Add entry eex of skeleton * Add color of skeleton eex * Update skeleton.exs * Add entry file of speed_dial eex * Add variant, size round space of speed_dial eex * Add color of speed_dial eex * Add entry eex file of spinner * Add size of spinner eex * Add extra type for spinner eex * Add color of spinner eex * Add entry eex file of stepper * Add type of stepper eex * Add color of stepper eex * Add entry eex file of table * Add size padding round of table eex * Add color of table eex * Add entry eex of table_content * Add type of table_content * Add size round space of table_content * Add color of table_content eex * Add entry eex of tabs * Add variant * Add color of tabs eex * Add eex file of tel_field * Add color of tel_field * Add entry eex file of text_field * Add space and size of text_field eex * Add color of text_field eex * Add entry eex file of textarea_field * Add eex conditions of textarea_field * Add entry eex file timeline * Add color of timeline eex * Add entry eex file of toast * Add color of toast eex * Add entry eex of toggle_field * Add color and size of toggle_field * Add entry eex of tooltip * Add color of tooltip eex * Add entry eex file of typography * Add color and size of typography eex * Add type of typography eex * Add url_field entry eex file * Add size of url_field eex * Add color of url_field eex * Add video eex * Add some conditions of video eex * vip --------- Co-authored-by: Mona Aghili <mona.laghili@gmail.com>
mishka-group · Sep 28, 2024 · 66458b6 · 66458b6
1 parent 9ad12c2
commit 66458b6
Show file tree

Hide file tree

Showing 173 changed files with 44,240 additions and 92 deletions.
diff --git a/.formatter.exs b/.formatter.exs
@@ -2,5 +2,10 @@
   import_deps: [:ecto, :ecto_sql, :phoenix],
   subdirectories: ["priv/*/migrations"],
   plugins: [Phoenix.LiveView.HTMLFormatter],
-  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
+  inputs: [
+    "*.{heex,ex,exs}",
+    "{config,lib,test}/**/*.{heex,ex,exs}",
+    "priv/*/seeds.exs",
+    "priv/templates/components/**/*.{exs}"
+  ]
 ]
diff --git a/lib/mishka_chelekom_web/components/chelekom/accordion.ex b/lib/mishka_chelekom_web/components/chelekom/accordion.ex
@@ -21,7 +21,6 @@ defmodule MishkaChelekom.Accordion do
   accordion items, enhancing the visual appeal and usability of the component.
   """
   use Phoenix.Component
-  import MishkaChelekomComponents
   alias Phoenix.LiveView.JS
 
   @sizes ["extra_small", "small", "medium", "large", "extra_large"]
@@ -1553,4 +1552,19 @@ defmodule MishkaChelekom.Accordion do
 
     Map.drop(rest, all_rest)
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/alert.ex b/lib/mishka_chelekom_web/components/chelekom/alert.ex
@@ -26,7 +26,6 @@ defmodule MishkaChelekom.Alert do
   flexibility in rendering custom content within alerts.
   """
   use Phoenix.Component
-  import MishkaChelekomComponents
   import MishkaChelekomWeb.Gettext
   alias Phoenix.LiveView.JS
 
@@ -597,4 +596,19 @@ defmodule MishkaChelekom.Alert do
          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
     )
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/avatar.ex b/lib/mishka_chelekom_web/components/chelekom/avatar.ex
@@ -20,7 +20,6 @@ defmodule MishkaChelekom.Avatar do
   """
 
   use Phoenix.Component
-  import MishkaChelekomComponents
 
   @sizes ["extra_small", "small", "medium", "large", "extra_large"]
   @colors [
@@ -546,4 +545,19 @@ defmodule MishkaChelekom.Avatar do
       "relative inline-flex items-center justify-center p-0.5 [&.border-avatar:has(.indicator)]:box-content"
     ]
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/badge.ex b/lib/mishka_chelekom_web/components/chelekom/badge.ex
@@ -16,7 +16,6 @@ defmodule MishkaChelekom.Badge do
 
   use Phoenix.Component
   alias Phoenix.LiveView.JS
-  import MishkaChelekomComponents
 
   @sizes ["extra_small", "small", "medium", "large", "extra_large"]
   @colors [
@@ -673,4 +672,19 @@ defmodule MishkaChelekom.Badge do
          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
     )
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/banner.ex b/lib/mishka_chelekom_web/components/chelekom/banner.ex
@@ -28,7 +28,6 @@ defmodule MishkaChelekom.Banner do
 
   use Phoenix.Component
   alias Phoenix.LiveView.JS
-  import MishkaChelekomComponents
   import MishkaChelekomWeb.Gettext
 
   @sizes ["extra_small", "small", "medium", "large", "extra_large"]
@@ -648,4 +647,19 @@ defmodule MishkaChelekom.Banner do
          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
     )
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/blockquote.ex b/lib/mishka_chelekom_web/components/chelekom/blockquote.ex
@@ -23,7 +23,6 @@ defmodule MishkaChelekom.Blockquote do
   """
 
   use Phoenix.Component
-  import MishkaChelekomComponents
 
   @sizes ["extra_small", "small", "medium", "large", "extra_large"]
   @colors [
@@ -543,4 +542,19 @@ defmodule MishkaChelekom.Blockquote do
   defp border_position(%{right_border: true}), do: "right"
   defp border_position(%{full_border: true}), do: "full"
   defp border_position(_), do: "left"
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/breadcrumb.ex b/lib/mishka_chelekom_web/components/chelekom/breadcrumb.ex
@@ -14,7 +14,6 @@ defmodule MishkaChelekom.Breadcrumb do
   behavior and appearance.
   """
   use Phoenix.Component
-  import MishkaChelekomComponents
 
   @sizes ["extra_small", "small", "medium", "large", "extra_large"]
   @colors [
@@ -213,4 +212,19 @@ defmodule MishkaChelekom.Breadcrumb do
       "flex items-center transition-all ease-in-ou duration-100 group"
     ]
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/button.ex b/lib/mishka_chelekom_web/components/chelekom/button.ex
@@ -23,7 +23,6 @@ defmodule MishkaChelekom.Button do
   """
 
   use Phoenix.Component
-  import MishkaChelekomComponents
 
   @sizes ["extra_small", "small", "medium", "large", "extra_large"]
   @variants [
@@ -1139,4 +1138,19 @@ defmodule MishkaChelekom.Button do
 
     Map.drop(rest, all_rest)
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/card.ex b/lib/mishka_chelekom_web/components/chelekom/card.ex
@@ -26,7 +26,6 @@ defmodule MishkaChelekom.Card do
   """
 
   use Phoenix.Component
-  import MishkaChelekomComponents
 
   @sizes [
     "extra_small",
@@ -684,4 +683,19 @@ defmodule MishkaChelekom.Card do
   defp color_variant("transparent", "dark") do
     "bg-transparent text-[#1E1E1E] border-transparent"
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/carousel.ex b/lib/mishka_chelekom_web/components/chelekom/carousel.ex
@@ -21,7 +21,6 @@ defmodule MishkaChelekom.Carousel do
   """
 
   use Phoenix.Component
-  import MishkaChelekomComponents
   alias Phoenix.LiveView.JS
 
   @doc """
@@ -527,4 +526,19 @@ defmodule MishkaChelekom.Carousel do
       |> JS.remove_class("active-indicator", to: ".carousel-indicator")
     end)
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/chekbox_field.ex b/lib/mishka_chelekom_web/components/chelekom/chekbox_field.ex
@@ -15,7 +15,6 @@ defmodule MishkaChelekom.CheckboxField do
   """
 
   use Phoenix.Component
-  import MishkaChelekomComponents
 
   @doc """
   The `checkbox_field` component is used to create customizable checkbox input elements with various
@@ -390,4 +389,37 @@ defmodule MishkaChelekom.CheckboxField do
       "focus-within:[&_.checkbox-field-wrapper_.checkbox-input]:ring-[#050404]"
     ]
   end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
+
+  defp translate_error({msg, opts}) do
+    # When using gettext, we typically pass the strings we want
+    # to translate as a static argument:
+    #
+    #     # Translate the number of files with plural rules
+    #     dngettext("errors", "1 file", "%{count} files", count)
+    #
+    # However the error messages in our forms and APIs are generated
+    # dynamically, so we need to translate them by calling Gettext
+    # with our gettext backend as first argument. Translations are
+    # available in the errors.po file (as we use the "errors" domain).
+    if count = opts[:count] do
+      Gettext.dngettext(MishkaChelekomWeb.Gettext, "errors", msg, msg, count, opts)
+    else
+      Gettext.dgettext(MishkaChelekomWeb.Gettext, "errors", msg, opts)
+    end
+  end
 end
diff --git a/lib/mishka_chelekom_web/components/chelekom/color_field.ex b/lib/mishka_chelekom_web/components/chelekom/color_field.ex
@@ -13,7 +13,6 @@ defmodule MishkaChelekom.ColorField do
   """
 
   use Phoenix.Component
-  import MishkaChelekomComponents
 
   @doc """
   The `color_field` component is used to create a customizable color input field with various
@@ -279,4 +278,37 @@ defmodule MishkaChelekom.ColorField do
       "[&_.color-field-wrapper_.color-input]:border-[#050404]"
     ]
   end
+
+  defp translate_error({msg, opts}) do
+    # When using gettext, we typically pass the strings we want
+    # to translate as a static argument:
+    #
+    #     # Translate the number of files with plural rules
+    #     dngettext("errors", "1 file", "%{count} files", count)
+    #
+    # However the error messages in our forms and APIs are generated
+    # dynamically, so we need to translate them by calling Gettext
+    # with our gettext backend as first argument. Translations are
+    # available in the errors.po file (as we use the "errors" domain).
+    if count = opts[:count] do
+      Gettext.dngettext(MishkaChelekomWeb.Gettext, "errors", msg, msg, count, opts)
+    else
+      Gettext.dgettext(MishkaChelekomWeb.Gettext, "errors", msg, opts)
+    end
+  end
+
+  attr :name, :string, required: true, doc: "Specifies the name of the element"
+  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"
+
+  defp icon(%{name: "hero-" <> _, class: class} = assigns) when is_list(class) do
+    ~H"""
+    <span class={[@name] ++ @class} />
+    """
+  end
+
+  defp icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end