irelia 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (248) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +32 -10
  3. data/Rakefile +18 -4
  4. data/app/assets/config/irelia_manifest.js +2 -2
  5. data/app/assets/dist/javascripts/irelia.js +1 -0
  6. data/app/assets/dist/stylesheets/irelia.css +1 -0
  7. data/app/assets/src/main.js +2 -0
  8. data/app/assets/src/main.pcss +245 -0
  9. data/app/components/index.js +7 -0
  10. data/app/components/index.pcss +38 -0
  11. data/app/components/irelia/app_shell/component.html.erb +18 -0
  12. data/app/components/irelia/app_shell/component.rb +14 -0
  13. data/app/components/irelia/app_shell/index.pcss +20 -0
  14. data/app/{frontend/components/page/header → components/irelia/app_shell}/preview.rb +1 -1
  15. data/app/components/irelia/app_shell/previews/default.html.erb +21 -0
  16. data/app/components/irelia/avatar/component.html.erb +3 -0
  17. data/app/components/irelia/avatar/component.rb +16 -0
  18. data/app/components/irelia/avatar/index.pcss +8 -0
  19. data/{lib/generators/view_component/templates/preview.rb.tt → app/components/irelia/avatar/preview.rb} +1 -1
  20. data/app/components/irelia/breadcrumbs/component.html.erb +12 -0
  21. data/app/components/irelia/breadcrumbs/component.rb +18 -0
  22. data/app/components/irelia/breadcrumbs/index.pcss +16 -0
  23. data/app/{frontend/components/page/container → components/irelia/breadcrumbs}/preview.rb +1 -1
  24. data/app/components/irelia/button/component.html.erb +27 -0
  25. data/app/components/irelia/button/component.rb +40 -0
  26. data/app/components/irelia/button/index.pcss +57 -0
  27. data/app/components/irelia/button/preview.rb +79 -0
  28. data/app/components/irelia/card/component.html.erb +5 -0
  29. data/app/components/irelia/card/component.rb +15 -0
  30. data/app/components/irelia/card/index.pcss +9 -0
  31. data/app/components/irelia/card/preview.rb +18 -0
  32. data/app/components/irelia/component.rb +55 -0
  33. data/app/components/irelia/component_preview.rb +7 -0
  34. data/app/components/irelia/container/component.rb +30 -0
  35. data/app/components/irelia/container/index.pcss +45 -0
  36. data/app/components/irelia/container/preview.rb +18 -0
  37. data/app/components/irelia/div/component.html.erb +3 -0
  38. data/app/components/irelia/div/component.rb +15 -0
  39. data/app/components/irelia/div/index.pcss +7 -0
  40. data/app/components/irelia/divider/component.html.erb +7 -0
  41. data/app/components/irelia/divider/component.rb +10 -0
  42. data/app/components/irelia/divider/index.pcss +15 -0
  43. data/app/components/irelia/dropdown/component.html.erb +17 -0
  44. data/app/components/irelia/dropdown/component.rb +52 -0
  45. data/app/components/irelia/dropdown/controller.js +14 -0
  46. data/app/components/irelia/dropdown/index.pcss +37 -0
  47. data/app/components/irelia/dropdown/preview.rb +42 -0
  48. data/app/components/irelia/dropdown/previews/direction_up.html.erb +10 -0
  49. data/app/components/irelia/empty_collection/component.html.erb +19 -0
  50. data/app/components/irelia/empty_collection/component.rb +15 -0
  51. data/app/components/irelia/empty_collection/index.pcss +23 -0
  52. data/app/components/irelia/empty_collection/preview.rb +9 -0
  53. data/app/components/irelia/flex/component.html.erb +3 -0
  54. data/app/components/irelia/flex/component.rb +21 -0
  55. data/app/components/irelia/flex/index.pcss +37 -0
  56. data/app/components/irelia/form/base/component.rb +51 -0
  57. data/app/components/irelia/form/base/index.pcss +7 -0
  58. data/app/components/irelia/form/email_field/component.html.erb +3 -0
  59. data/app/components/irelia/form/email_field/component.rb +10 -0
  60. data/app/components/irelia/form/email_field/index.pcss +7 -0
  61. data/app/{frontend/components/page/breadcrumbs → components/irelia/form/email_field}/preview.rb +1 -1
  62. data/app/components/irelia/form/email_field/previews/default.html.erb +3 -0
  63. data/app/components/irelia/form/group/component.html.erb +19 -0
  64. data/app/components/irelia/form/group/component.rb +26 -0
  65. data/app/components/irelia/form/group/index.pcss +32 -0
  66. data/app/components/irelia/form/password_field/component.html.erb +3 -0
  67. data/app/components/irelia/form/password_field/component.rb +10 -0
  68. data/app/components/irelia/form/password_field/index.pcss +7 -0
  69. data/app/components/irelia/form/password_field/preview.rb +9 -0
  70. data/app/components/irelia/form/password_field/previews/default.html.erb +3 -0
  71. data/app/components/irelia/form/select/component.html.erb +3 -0
  72. data/app/components/irelia/form/select/component.rb +18 -0
  73. data/app/components/irelia/form/select/index.pcss +7 -0
  74. data/app/components/irelia/form/select/preview.rb +9 -0
  75. data/app/components/irelia/form/select/previews/default.html.erb +3 -0
  76. data/app/components/irelia/form/text_field/component.html.erb +3 -0
  77. data/app/components/irelia/form/text_field/component.rb +10 -0
  78. data/app/components/irelia/form/text_field/index.pcss +7 -0
  79. data/app/components/irelia/form/text_field/preview.rb +9 -0
  80. data/app/components/irelia/form/text_field/previews/default.html.erb +3 -0
  81. data/app/components/irelia/html/component.html.erb +3 -0
  82. data/app/components/irelia/html/component.rb +10 -0
  83. data/app/components/irelia/html/index.pcss +16 -0
  84. data/app/components/irelia/html/preview.rb +9 -0
  85. data/app/components/irelia/icon/component.rb +18 -0
  86. data/app/components/irelia/icon/index.pcss +7 -0
  87. data/app/components/irelia/icon/preview.rb +10 -0
  88. data/app/components/irelia/icon/previews/font_awesome.html.erb +23 -0
  89. data/app/components/irelia/modal/component.html.erb +28 -0
  90. data/app/components/irelia/modal/component.rb +29 -0
  91. data/app/components/irelia/modal/controller.js +50 -0
  92. data/app/components/irelia/modal/index.pcss +41 -0
  93. data/app/{frontend/components/navbar/select_account → components/irelia/modal}/preview.rb +5 -2
  94. data/app/components/irelia/modal/previews/remote_content.html.erb +6 -0
  95. data/app/components/irelia/modal/previews/static_content.html.erb +4 -0
  96. data/app/components/irelia/navbar/brand/component.rb +25 -0
  97. data/app/components/irelia/navbar/brand/index.pcss +9 -0
  98. data/app/components/irelia/navbar/brand/preview.rb +10 -0
  99. data/app/components/irelia/navbar/component.html.erb +10 -0
  100. data/app/components/irelia/navbar/component.rb +20 -0
  101. data/app/components/irelia/navbar/index.pcss +13 -0
  102. data/app/components/irelia/navbar/navigation/component.html.erb +5 -0
  103. data/app/components/irelia/navbar/navigation/component.rb +15 -0
  104. data/app/components/irelia/navbar/navigation/index.pcss +9 -0
  105. data/app/components/irelia/navbar/navigation/link/component.html.erb +5 -0
  106. data/app/components/irelia/navbar/navigation/link/component.rb +18 -0
  107. data/app/components/irelia/navbar/navigation/link/index.pcss +13 -0
  108. data/app/components/irelia/navbar/navigation/link/preview.rb +10 -0
  109. data/app/components/irelia/navbar/navigation/preview.rb +15 -0
  110. data/app/components/irelia/navbar/preview.rb +17 -0
  111. data/app/components/irelia/navbar/previews/default.html.erb +19 -0
  112. data/app/components/irelia/navbar/previews/full_width.html.erb +19 -0
  113. data/app/components/irelia/navbar/previews/navigation_right.html.erb +19 -0
  114. data/app/components/irelia/navbar/section/component.html.erb +3 -0
  115. data/app/components/irelia/navbar/section/component.rb +13 -0
  116. data/app/components/irelia/navbar/section/index.pcss +8 -0
  117. data/app/components/irelia/navbar/separator/component.rb +14 -0
  118. data/app/components/irelia/navbar/separator/index.pcss +8 -0
  119. data/app/components/irelia/navigation/component.html.erb +7 -0
  120. data/app/components/irelia/navigation/component.rb +23 -0
  121. data/app/components/irelia/navigation/index.pcss +7 -0
  122. data/app/components/irelia/navigation/preview.rb +14 -0
  123. data/app/components/irelia/notification/component.html.erb +9 -0
  124. data/app/components/irelia/notification/component.rb +27 -0
  125. data/app/components/irelia/notification/index.pcss +41 -0
  126. data/app/components/irelia/notification/preview.rb +22 -0
  127. data/app/components/irelia/page_header/component.html.erb +15 -0
  128. data/app/components/irelia/page_header/component.rb +17 -0
  129. data/app/components/irelia/page_header/index.pcss +36 -0
  130. data/app/components/irelia/page_header/preview.rb +13 -0
  131. data/app/components/irelia/sidebar/brand/component.html.erb +6 -0
  132. data/app/components/irelia/sidebar/brand/component.rb +19 -0
  133. data/app/components/irelia/sidebar/brand/index.pcss +13 -0
  134. data/app/components/irelia/sidebar/brand/preview.rb +10 -0
  135. data/app/components/irelia/sidebar/component.html.erb +8 -0
  136. data/app/components/irelia/sidebar/component.rb +16 -0
  137. data/app/components/irelia/sidebar/index.pcss +12 -0
  138. data/app/components/irelia/sidebar/navigation/component.html.erb +5 -0
  139. data/app/components/irelia/sidebar/navigation/component.rb +12 -0
  140. data/app/components/irelia/sidebar/navigation/index.pcss +8 -0
  141. data/app/components/irelia/sidebar/navigation/link/component.html.erb +10 -0
  142. data/app/components/irelia/sidebar/navigation/link/component.rb +26 -0
  143. data/app/components/irelia/sidebar/navigation/link/index.pcss +20 -0
  144. data/app/components/irelia/sidebar/navigation/link/preview.rb +14 -0
  145. data/app/components/irelia/sidebar/navigation/preview.rb +16 -0
  146. data/app/components/irelia/sidebar/preview.rb +9 -0
  147. data/app/components/irelia/sidebar/previews/default.html.erb +12 -0
  148. data/app/components/irelia/sidebar/section/component.html.erb +3 -0
  149. data/app/components/irelia/sidebar/section/component.rb +16 -0
  150. data/app/components/irelia/sidebar/section/index.pcss +11 -0
  151. data/app/components/irelia/split_screen/component.html.erb +8 -0
  152. data/app/components/irelia/split_screen/component.rb +18 -0
  153. data/app/components/irelia/split_screen/index.pcss +35 -0
  154. data/app/components/irelia/split_screen/preview.rb +12 -0
  155. data/app/components/irelia/stack/component.html.erb +3 -0
  156. data/app/components/irelia/stack/component.rb +21 -0
  157. data/app/components/irelia/stack/index.pcss +25 -0
  158. data/app/components/irelia/stack/preview.rb +47 -0
  159. data/app/components/irelia/stack/previews/default.html.erb +5 -0
  160. data/app/components/irelia/stack/previews/horizontal.html.erb +5 -0
  161. data/app/components/irelia/stack/previews/vertical.html.erb +5 -0
  162. data/app/components/irelia/table/component.html.erb +23 -0
  163. data/app/components/irelia/table/component.rb +31 -0
  164. data/app/components/irelia/table/index.pcss +32 -0
  165. data/app/components/irelia/table/preview.rb +9 -0
  166. data/app/components/irelia/table/previews/default.html.erb +19 -0
  167. data/app/components/irelia/table/row/component.html.erb +5 -0
  168. data/app/components/irelia/table/row/component.rb +34 -0
  169. data/app/components/irelia/table/row/index.pcss +7 -0
  170. data/app/helpers/irelia/components_helper.rb +62 -0
  171. data/app/helpers/irelia/form_helper.rb +9 -0
  172. data/app/helpers/irelia/head_helper.rb +7 -0
  173. data/app/views/irelia/_head.html.erb +25 -0
  174. data/lib/irelia/config.rb +18 -0
  175. data/lib/irelia/engine.rb +13 -11
  176. data/lib/irelia/form_builder.rb +48 -0
  177. data/lib/irelia/options/fixed.rb +26 -0
  178. data/lib/irelia/options/flex/direction.rb +22 -0
  179. data/lib/irelia/options/flex/gap.rb +25 -0
  180. data/lib/irelia/options/flex/grow.rb +21 -0
  181. data/lib/irelia/options/flex/items.rb +25 -0
  182. data/lib/irelia/options/flex/justify.rb +27 -0
  183. data/lib/irelia/options/padding.rb +46 -0
  184. data/lib/irelia/options/text_formatting.rb +30 -0
  185. data/lib/irelia/options/width.rb +19 -0
  186. data/lib/irelia/version.rb +1 -1
  187. data/lib/irelia.rb +20 -24
  188. metadata +199 -168
  189. data/app/frontend/components/application_view_component.rb +0 -5
  190. data/app/frontend/components/application_view_component_preview.rb +0 -5
  191. data/app/frontend/components/navbar/button/component.html.erb +0 -8
  192. data/app/frontend/components/navbar/button/component.rb +0 -13
  193. data/app/frontend/components/navbar/button/preview.rb +0 -12
  194. data/app/frontend/components/navbar/container/component.html.erb +0 -5
  195. data/app/frontend/components/navbar/container/component.rb +0 -8
  196. data/app/frontend/components/navbar/container/preview.rb +0 -12
  197. data/app/frontend/components/navbar/dark_mode_switcher/component.html.erb +0 -4
  198. data/app/frontend/components/navbar/dark_mode_switcher/component.rb +0 -8
  199. data/app/frontend/components/navbar/dark_mode_switcher/preview.rb +0 -12
  200. data/app/frontend/components/navbar/menu_items/component.html.erb +0 -3
  201. data/app/frontend/components/navbar/menu_items/component.rb +0 -8
  202. data/app/frontend/components/navbar/menu_items/preview.rb +0 -12
  203. data/app/frontend/components/navbar/navlink/component.html.erb +0 -8
  204. data/app/frontend/components/navbar/navlink/component.rb +0 -13
  205. data/app/frontend/components/navbar/navlink/preview.rb +0 -12
  206. data/app/frontend/components/navbar/right_section/component.html.erb +0 -3
  207. data/app/frontend/components/navbar/right_section/component.rb +0 -8
  208. data/app/frontend/components/navbar/right_section/preview.rb +0 -12
  209. data/app/frontend/components/navbar/select_account/component.html.erb +0 -36
  210. data/app/frontend/components/navbar/select_account/component.rb +0 -6
  211. data/app/frontend/components/navbar/separator/component.html.erb +0 -1
  212. data/app/frontend/components/navbar/separator/component.rb +0 -7
  213. data/app/frontend/components/navbar/separator/preview.rb +0 -12
  214. data/app/frontend/components/page/breadcrumbs/component.html.erb +0 -16
  215. data/app/frontend/components/page/breadcrumbs/component.rb +0 -6
  216. data/app/frontend/components/page/container/component.html.erb +0 -3
  217. data/app/frontend/components/page/container/component.rb +0 -4
  218. data/app/frontend/components/page/header/component.html.erb +0 -12
  219. data/app/frontend/components/page/header/component.rb +0 -6
  220. data/app/helpers/navbar_helper.rb +0 -35
  221. data/app/helpers/page_helper.rb +0 -15
  222. data/app/javascript/controllers/dark_mode_switcher_controller.js +0 -20
  223. data/app/javascript/controllers/dropdown_controller.js +0 -3
  224. data/app/views/devise/registrations/new.html.erb +0 -21
  225. data/app/views/devise/sessions/new.html.erb +0 -18
  226. data/app/views/layouts/application.html.erb +0 -11
  227. data/app/views/layouts/devise.html.erb +0 -23
  228. data/app/views/layouts/mailer.html.erb +0 -13
  229. data/app/views/layouts/mailer.text.erb +0 -1
  230. data/app/views/layouts/teamable.html.erb +0 -31
  231. data/app/views/shared/_head.html.erb +0 -26
  232. data/app/views/shared/_navbar.html.erb +0 -30
  233. data/app/views/shared/_navbar_logo.html.erb +0 -3
  234. data/app/views/teamable/accounts/new.html.erb +0 -10
  235. data/app/views/teamable/setup/new.html.erb +0 -8
  236. data/app/views/teamable/shared/_form.html.erb +0 -4
  237. data/config/importmap.rb +0 -7
  238. data/config/initializers/devise.rb +0 -313
  239. data/config/initializers/simple_form.rb +0 -148
  240. data/config/initializers/view_component.rb +0 -18
  241. data/lib/generators/irelia/install_generator.rb +0 -19
  242. data/lib/generators/templates/irelia.rb +0 -14
  243. data/lib/generators/view_component/USAGE +0 -15
  244. data/lib/generators/view_component/templates/component.html.erb.tt +0 -1
  245. data/lib/generators/view_component/templates/component.rb.tt +0 -8
  246. data/lib/generators/view_component/templates/component_system_test.rb.tt +0 -13
  247. data/lib/generators/view_component/templates/component_test.rb.tt +0 -19
  248. data/lib/generators/view_component/view_component_generator.rb +0 -53
@@ -0,0 +1,17 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::PageHeader::Component < Irelia::Component
4
+ option :title
5
+ option :subline, optional: true
6
+ option :variant, default: proc { :default }, in: %i[default split_screen]
7
+
8
+ renders_many :buttons, Irelia::Button::Component
9
+
10
+ def variants
11
+ class_names(
12
+ "irelia-page-header",
13
+ "irelia-page-header--default": variant == :default,
14
+ "irelia-page-header--split-screen": variant == :split_screen
15
+ )
16
+ end
17
+ end
@@ -0,0 +1,36 @@
1
+ @layer components {
2
+ .irelia-page-header {
3
+ .irelia-page-header__action-buttons {
4
+ }
5
+ }
6
+
7
+ .irelia-page-header--default {
8
+ @apply flex space-y-1 mb-10 items-center;
9
+
10
+ .irelia-page-header__inner {
11
+ @apply flex-1;
12
+
13
+ h1 {
14
+ @apply text-2xl font-bold text-irelia-primary;
15
+ }
16
+
17
+ p {
18
+ @apply text-neutral-400;
19
+ }
20
+ }
21
+ }
22
+
23
+ .irelia-page-header--split-screen {
24
+ @apply mb-5;
25
+
26
+ .irelia-page-header__inner {
27
+ h1 {
28
+ @apply text-2xl font-bold mb-2 text-irelia-primary;
29
+ }
30
+
31
+ p {
32
+ @apply text-neutral-400;
33
+ }
34
+ }
35
+ }
36
+ }
@@ -0,0 +1,13 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::PageHeader::Preview < Irelia::ComponentPreview
4
+ # You can specify the container class for the default template
5
+ # self.container_class = "w-1/2 border border-gray-300"
6
+
7
+ def default
8
+ irelia_page_header(title: "Projects", subline: "List of all your projects.") do |header|
9
+ header.with_button { "Create a project" }
10
+ header.with_button(color: :secondary) { "Documentation" }
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,6 @@
1
+ <%= content_tag(:section, html_options) do %>
2
+ <a href="<%= url %>" class="irelia-sidebar__brand--logo"><%= content %></a>
3
+ <span class="irelia-sidebar__brand--actions">
4
+ <%= render(Irelia::Icon::Component.new) { "fa fa-bell" } %>
5
+ </span>
6
+ <% end %>
@@ -0,0 +1,19 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Sidebar::Brand::Component < Irelia::Component
4
+ option :url, default: -> { nil }, optional: true
5
+
6
+ def variants
7
+ class_names(
8
+ "irelia-sidebar__brand",
9
+ "irelia-sidebar__brand--default": variant == :default
10
+ )
11
+ end
12
+
13
+ def initialize(**options)
14
+ super
15
+
16
+ @tag = @url.present? ? :a : :div
17
+ @html_options[:href] = @url if @url.present?
18
+ end
19
+ end
@@ -0,0 +1,13 @@
1
+ @layer components {
2
+ .irelia-sidebar__brand {
3
+ @apply text-xl font-bold;
4
+ }
5
+
6
+ .irelia-sidebar__brand--default {
7
+ @apply -mt-10 flex justify-between items-center h-28 px-10 text-irelia-primary hover:text-irelia-primary-hover transition;
8
+
9
+ .irelia-sidebar__brand--actions {
10
+ @apply text-sm;
11
+ }
12
+ }
13
+ }
@@ -0,0 +1,10 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Sidebar::Brand::Preview < Irelia::ComponentPreview
4
+ # You can specify the container class for the default template
5
+ # self.container_class = "w-1/2 border border-gray-300"
6
+
7
+ def default
8
+ render(Irelia::Sidebar::Brand::Component.new(url: "#")) { "Irelia" }
9
+ end
10
+ end
@@ -0,0 +1,8 @@
1
+ <%= content_tag :aside, html_options do %>
2
+ <div class="irelia-sidebar__inner">
3
+ <% components.each do |component| %>
4
+ <%= component %>
5
+ <% end %>
6
+ <%= content %>
7
+ </div>
8
+ <% end %>
@@ -0,0 +1,16 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Sidebar::Component < Irelia::Component
4
+ renders_many :components, types: {
5
+ brand: { renders: Irelia::Sidebar::Brand::Component, as: :brand },
6
+ navigation: { renders: Irelia::Sidebar::Navigation::Component, as: :navigation },
7
+ section: { renders: Irelia::Sidebar::Section::Component, as: :section }
8
+ }
9
+
10
+ def variants
11
+ class_names(
12
+ "irelia-sidebar",
13
+ "irelia-sidebar--default": variant == :default
14
+ )
15
+ end
16
+ end
@@ -0,0 +1,12 @@
1
+ @layer components {
2
+ .irelia-sidebar {
3
+ @apply flex-shrink w-96 bg-stone-100 border-r-2 border-stone-100 py-10;
4
+ }
5
+
6
+ .irelia-sidebar--default {
7
+ }
8
+
9
+ .irelia-sidebar__inner {
10
+ @apply flex flex-col h-full gap-y-10;
11
+ }
12
+ }
@@ -0,0 +1,5 @@
1
+ <%= content_tag :section, html_options do %>
2
+ <% links.each do |link| %>
3
+ <%= link %>
4
+ <% end %>
5
+ <% end %>
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Sidebar::Navigation::Component < Irelia::Sidebar::Section::Component
4
+ renders_many :links, Irelia::Sidebar::Navigation::Link::Component
5
+
6
+ def variants
7
+ class_names(
8
+ "irelia-sidebar__navigation",
9
+ "irelia-sidebar__navigation--default": variant == :default
10
+ )
11
+ end
12
+ end
@@ -0,0 +1,8 @@
1
+ @layer components {
2
+ .irelia-sidebar__navigation {
3
+ @apply flex flex-col;
4
+ }
5
+
6
+ .irelia-sidebar__navigation--default {
7
+ }
8
+ }
@@ -0,0 +1,10 @@
1
+ <%= tag_helper url, html_options do %>
2
+ <% if icon %>
3
+ <span class="irelia-sidebar__navigation__link__icon">
4
+ <%= helpers.irelia_icon icon_class: icon %>
5
+ </span>
6
+ <% end %>
7
+ <span class="irelia-sidebar__navigation__link__content">
8
+ <%= content %>
9
+ </span>
10
+ <% end %>
@@ -0,0 +1,26 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Sidebar::Navigation::Link::Component < Irelia::Component
4
+ option :url
5
+ option :active, default: -> { false }
6
+ option :icon, optional: true
7
+ option :method, optional: true, default: -> { :get }
8
+
9
+ def tag_helper(*args, &block)
10
+ method == :get ? link_to(*args, &block) : button_to(*args, &block)
11
+ end
12
+
13
+ def variants
14
+ class_names(
15
+ "irelia-sidebar__navigation__link",
16
+ "irelia-sidebar__navigation__link--default": variant == :default,
17
+ "irelia-sidebar__navigation__link--active": active
18
+ )
19
+ end
20
+
21
+ def initialize(**options)
22
+ super
23
+
24
+ @html_options[:method] = @method if @method != :get
25
+ end
26
+ end
@@ -0,0 +1,20 @@
1
+ @layer components {
2
+ .irelia-sidebar__navigation__link {
3
+ }
4
+
5
+ .irelia-sidebar__navigation__link--default {
6
+ @apply px-8 flex py-2 font-semibold gap-x-3 border-l-4 border-l-transparent;
7
+
8
+ &.irelia-sidebar__navigation__link--active {
9
+ @apply font-bold text-irelia-primary border-l-irelia-primary;
10
+ }
11
+
12
+ &:hover {
13
+ @apply text-irelia-primary;
14
+ }
15
+
16
+ .irelia-sidebar__navigation__link__icon {
17
+ @apply w-6 flex items-center justify-center;
18
+ }
19
+ }
20
+ }
@@ -0,0 +1,14 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Sidebar::Navigation::Link::Preview < Irelia::ComponentPreview
4
+ # You can specify the container class for the default template
5
+ # self.container_class = "w-1/2 border border-gray-300"
6
+
7
+ def default
8
+ render(Irelia::Sidebar::Navigation::Link::Component.new(icon: "fa fa-dashboard", url: "#")) { "Dashboard" }
9
+ end
10
+
11
+ def post_request
12
+ render(Irelia::Sidebar::Navigation::Link::Component.new(icon: "fa fa-right-from-bracket", url: "#", method: :delete)) { "Sign out" }
13
+ end
14
+ end
@@ -0,0 +1,16 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Sidebar::Navigation::Preview < Irelia::ComponentPreview
4
+ # You can specify the container class for the default template
5
+ # self.container_class = "w-1/2 border border-gray-300"
6
+
7
+ def default
8
+ render(Irelia::Sidebar::Navigation::Component.new) do |navbar|
9
+ navbar.with_link(url: "#", icon: "fa fa-home", active: true) { "Home" }
10
+ navbar.with_link(url: "#", icon: "fa fa-globe") { "Websites" }
11
+ navbar.with_link(url: "#", icon: "fab fa-github") { "Repositories" }
12
+ navbar.with_link(url: "#", icon: "fa fa-book") { "Guide & documenation" }
13
+ navbar.with_link(url: "#", icon: "fa fa-gear") { "Settings" }
14
+ end
15
+ end
16
+ end
@@ -0,0 +1,9 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Sidebar::Preview < Irelia::ComponentPreview
4
+ # You can specify the container class for the default template
5
+ # self.container_class = "w-1/2 border border-gray-300"
6
+
7
+ def default
8
+ end
9
+ end
@@ -0,0 +1,12 @@
1
+ <%= irelia_sidebar do |sidebar| %>
2
+ <% sidebar.with_brand(url: root_path) { "Irelia" } %>
3
+ <% sidebar.with_navigation do |navbar| %>
4
+ <% navbar.with_link(url: "#", icon: "fa fa-home", active: true) { "Home" } %>
5
+ <% navbar.with_link(url: "#", icon: "fa fa-globe") { "Websites" } %>
6
+ <% navbar.with_link(url: "#", icon: "fab fa-github") { "Repositories" } %>
7
+ <% navbar.with_link(url: "#", icon: "fa fa-book") { "Guide & documenation" } %>
8
+ <% navbar.with_link(url: "#", icon: "fa fa-gear") { "Settings" } %>
9
+ <% end %>
10
+ <% sidebar.with_section(grow: true) %>
11
+ <% sidebar.with_section { "footer" } %>
12
+ <% end %>
@@ -0,0 +1,3 @@
1
+ <%= content_tag :section, html_options do %>
2
+ <%= content %>
3
+ <% end %>
@@ -0,0 +1,16 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Sidebar::Section::Component < Irelia::Component
4
+ include Irelia::Options::Flex::Grow
5
+ include Irelia::Options::Flex::Justify
6
+
7
+ option :padding, default: -> { true }
8
+
9
+ def variants
10
+ class_names(
11
+ "irelia-sidebar__section",
12
+ "irelia-sidebar__section--default": variant == :default,
13
+ "irelia-sidebar__section--padding": padding
14
+ )
15
+ end
16
+ end
@@ -0,0 +1,11 @@
1
+ @layer components {
2
+ .irelia-sidebar__section {
3
+ }
4
+
5
+ .irelia-sidebar__section--default {
6
+ }
7
+
8
+ .irelia-sidebar__section--padding {
9
+ @apply px-10;
10
+ }
11
+ }
@@ -0,0 +1,8 @@
1
+ <%= content_tag :div, html_options do %>
2
+ <main class="irelia-split-screen__main">
3
+ <div class="irelia-split-screen__main__inner">
4
+ <%= content %>
5
+ </div>
6
+ </main>
7
+ <aside class="irelia-split-screen__aside"></aside>
8
+ <% end %>
@@ -0,0 +1,18 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::SplitScreen::Component < Irelia::Component
4
+ renders_one :left
5
+ renders_one :right
6
+
7
+ option :variant, default: -> { :default }, values: %i[default reverse]
8
+ option :center, default: -> { false }, values: %i[true false]
9
+
10
+ def variants
11
+ class_names(
12
+ "irelia-split-screen",
13
+ "irelia-split-screen--default": variant == :default,
14
+ "irelia-split-screen--reverse": variant == :reverse,
15
+ "irelia-split-screen--center": center == true,
16
+ )
17
+ end
18
+ end
@@ -0,0 +1,35 @@
1
+ @layer components {
2
+ .irelia-split-screen {
3
+ @apply fixed left-0 right-0 top-[var(--irelia-navbar-height)] bottom-0 flex;
4
+
5
+ .irelia-split-screen__aside {
6
+ @apply flex flex-1 bg-irelia-primary;
7
+ }
8
+
9
+ .irelia-split-screen__main {
10
+ @apply flex flex-1;
11
+
12
+ .irelia-split-screen__main__inner {
13
+ @apply w-full max-w-xl;
14
+ }
15
+ }
16
+ }
17
+
18
+ .irelia-split-screen--center {
19
+ .irelia-split-screen__main {
20
+ @apply items-center justify-center;
21
+
22
+ .irelia-split-screen__main__inner {
23
+ @apply text-center;
24
+ }
25
+ }
26
+ }
27
+
28
+ .irelia-split-screen--default {
29
+ @apply flex-row;
30
+ }
31
+
32
+ .irelia-split-screen--reverse {
33
+ @apply flex-row-reverse;
34
+ }
35
+ }
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::SplitScreen::Preview < Irelia::ComponentPreview
4
+ # You can specify the container class for the default template
5
+ # self.container_class = "w-1/2 border border-gray-300"
6
+
7
+ def default
8
+ component = Irelia::SplitScreen::Component.new
9
+ component.with_content("Main content!")
10
+ render component
11
+ end
12
+ end
@@ -0,0 +1,3 @@
1
+ <%= content_tag :div, html_options do %>
2
+ <%= content %>
3
+ <% end %>
@@ -0,0 +1,21 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Stack::Component < Irelia::Component
4
+ include Irelia::Options::Flex::Items
5
+ include Irelia::Options::Flex::Justify
6
+
7
+ option :direction, default: -> { :horizontal }, in: %i[horizontal horizontal_reverse vertical vertical_reverse]
8
+ option :grow, default: -> { false }, in: [ true, false ]
9
+
10
+ def variants
11
+ class_names(
12
+ "irelia-stack",
13
+ "irelia-stack--default": variant == :default,
14
+ "irelia-stack--horizontal": direction == :horizontal,
15
+ "irelia-stack--horizontal-reverse": direction == :horizontal_reverse,
16
+ "irelia-stack--vertical": direction == :vertical,
17
+ "irelia-stack--vertical-reverse": direction == :vertical_reverse,
18
+ "irelia-stack--grow": grow
19
+ )
20
+ end
21
+ end
@@ -0,0 +1,25 @@
1
+ @layer components {
2
+ .irelia-stack {
3
+ @apply flex gap-4;
4
+ }
5
+
6
+ .irelia-stack--grow > * {
7
+ @apply grow;
8
+ }
9
+
10
+ .irelia-stack--horizontal {
11
+ @apply flex-row;
12
+ }
13
+
14
+ .irelia-stack--horizontal-reverse {
15
+ @apply flex-row-reverse;
16
+ }
17
+
18
+ .irelia-stack--vertical {
19
+ @apply flex-col;
20
+ }
21
+
22
+ .irelia-stack--vertical-reverse {
23
+ @apply flex-col-reverse;
24
+ }
25
+ }
@@ -0,0 +1,47 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Stack::Preview < Irelia::ComponentPreview
4
+ # You can specify the container class for the default template
5
+ # self.container_class = "w-1/2 border border-gray-300"
6
+
7
+ # @label Default
8
+ # @param direction select { choices: [horizontal, horizontal_reverse, vertical, vertical_reverse] } "Direction of the stack"
9
+ # @param justify select { choices: [start, center, between, end, around, evenly, stretch] } "Position along main axis"
10
+ # @param items select { choices: [flex_start, center, flex_end, baseline, stretch] } "Position along cross axis"
11
+ # @param grow toggle "Grow items to fill space"
12
+
13
+ def default(direction: :horizontal, justify: :flex_start, items: :baseline, grow: false)
14
+ render_with_template(locals: {
15
+ direction: direction,
16
+ justify: justify,
17
+ items: items,
18
+ grow: grow
19
+ })
20
+ end
21
+
22
+ # @label Horizontal
23
+ # @param justify select { choices: [start, center, between, end, around, evenly, stretch] } "Position along main axis"
24
+ # @param items select { choices: [flex_start, center, flex_end, baseline, stretch] } "Position along cross axis"
25
+ # @param grow toggle "Grow items to fill space"
26
+
27
+ def horizontal(justify: :flex_start, items: :baseline, grow: false)
28
+ render_with_template(locals: {
29
+ justify: justify,
30
+ items: items,
31
+ grow: grow
32
+ })
33
+ end
34
+
35
+ # @label Vertical
36
+ # @param justify select { choices: [start, center, between, end, around, evenly, stretch] } "Position along main axis"
37
+ # @param items select { choices: [flex_start, center, flex_end, baseline, stretch] } "Position along cross axis"
38
+ # @param grow toggle "Grow items to fill space"
39
+
40
+ def vertical(justify: :flex_start, items: :baseline, grow: false)
41
+ render_with_template(locals: {
42
+ justify: justify,
43
+ items: items,
44
+ grow: grow
45
+ })
46
+ end
47
+ end
@@ -0,0 +1,5 @@
1
+ <%= irelia_stack(direction:, justify:, items:, grow:) do |stack| %>
2
+ <%= irelia_button { "Button" } %>
3
+ <%= irelia_button(size: :lg) { "Button two" } %>
4
+ <%= irelia_button(color: :danger) { "Button three" } %>
5
+ <% end %>
@@ -0,0 +1,5 @@
1
+ <%= irelia_stack(direction: :horizontal, justify:, items:, grow:) do |stack| %>
2
+ <%= irelia_button { "Button" } %>
3
+ <%= irelia_button { "Button two" } %>
4
+ <%= irelia_button(color: :danger, size: :xs) { "Button three" } %>
5
+ <% end %>
@@ -0,0 +1,5 @@
1
+ <%= irelia_stack(direction: :vertical, justify:, items:, grow:) do |stack| %>
2
+ <%= irelia_button { "Button" } %>
3
+ <%= irelia_button { "Button two" } %>
4
+ <%= irelia_button(color: :danger, size: :xs) { "Button three" } %>
5
+ <% end %>
@@ -0,0 +1,23 @@
1
+ <%= render(Irelia::Card::Component.new(padding: false)) do %>
2
+ <%= content_tag :table, html_options do %>
3
+ <% if columns.size > 0 %>
4
+ <thead>
5
+ <tr>
6
+ <% columns.each do |column| %>
7
+ <%= column %>
8
+ <% end %>
9
+ </tr>
10
+ </thead>
11
+ <% end %>
12
+
13
+ <% if rows.size > 0 %>
14
+ <tbody>
15
+ <% rows.each do |row| %>
16
+ <%= row %>
17
+ <% end %>
18
+ </tbody>
19
+ <% end %>
20
+
21
+ <%= content %>
22
+ <% end %>
23
+ <% end %>
@@ -0,0 +1,31 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Table::Component < Irelia::Component
4
+ renders_many :columns, "ColumnComponent"
5
+ renders_many :rows, Irelia::Table::Row::Component
6
+
7
+ def variants
8
+ class_names(
9
+ "irelia-table",
10
+ "irelia-table--default": variant == :default
11
+ )
12
+ end
13
+
14
+ class ColumnComponent < Irelia::Component
15
+ def initialize(**options)
16
+ super(**options)
17
+ end
18
+
19
+ def variants
20
+ class_names(
21
+ "irelia-table irelia-table__head-column",
22
+ )
23
+ end
24
+
25
+ def call
26
+ content_tag :th, html_options do
27
+ content
28
+ end
29
+ end
30
+ end
31
+ end
@@ -0,0 +1,32 @@
1
+ @layer components {
2
+ .irelia-table {
3
+ @apply min-w-full divide-y divide-irelia-gray text-left;
4
+
5
+ thead {
6
+ tr {
7
+ th {
8
+ @apply px-5 py-3 text-sm font-bold uppercase text-irelia-primary;
9
+ }
10
+ }
11
+ }
12
+
13
+ tbody {
14
+ @apply divide-y divide-irelia-gray;
15
+
16
+ tr {
17
+ @apply bg-white text-sm text-zinc-600 hover:text-black;
18
+
19
+ td {
20
+ @apply px-5 py-3;
21
+ }
22
+
23
+ &:nth-child(odd) {
24
+ @apply bg-zinc-50;
25
+ }
26
+ }
27
+ }
28
+ }
29
+
30
+ .irelia-table--default {
31
+ }
32
+ }
@@ -0,0 +1,9 @@
1
+ # frozen_string_literal: true
2
+
3
+ class Irelia::Table::Preview < Irelia::ComponentPreview
4
+ # You can specify the container class for the default template
5
+ # self.container_class = "w-1/2 border border-gray-300"
6
+
7
+ def default
8
+ end
9
+ end