alveole 0.0.1 → 1.0.0.pre.alpha.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b9eb2b2fa6bb60128ca9c7e856154c2acc03c20cd19416946b1c9c1643697eeb
-  data.tar.gz: d21efc1c973809fe2273583dc58ec8f23feab0214dcb07bd84855911aa0602e5
+  metadata.gz: 4e1b25c361ee735c0d5cf7db902bd9fa45c836e6607af048327878f7a5b7db89
+  data.tar.gz: 32841b85098794702e59ba252df533e05fcfc8ec06ec5f38e287fdc9617bc9c9
 SHA512:
-  metadata.gz: 5cee3910f174462b9b5860a23abff5ed9d2f8fe781f8a3886647be8f382a3dfdd53eab3b86243a18b7b0b225c04a4d5712b566118cc1f96bb5ffdfad79a39001
-  data.tar.gz: 1afa35c2ef925d920f78a5e12e5c70b61a98d72782a46db56e7735d877f677fb713d060abab1515c1f188a11815f486b0edd3b1314e320c40520f3a8127e5dfb
+  metadata.gz: 95c1d0109eb0653dcdcb7aef5bda335117469fc52d05dea852c6859c3d0b51a9cdc67ae9d3b51437de7dbc50aeb67c797fe4b3ad16328721d3204b311256aa55
+  data.tar.gz: 9d4737460a4be0bf32ae8fc58553dcb7426f9742c58b80b557b575b330cc26b080cddd8e326387810a903f8131a72ae50165e222ee80eb17ffa783d6906c9442

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Clément Prod'homme
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -1,44 +1,39 @@
 # Alveole
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/alveole`. To experiment with that code, run `bin/console` for an interactive prompt.
+Alveole is a versatile gem designed to enhance your web development experience by providing powerful components through the gem's view_component framework. With Alveole, building dynamic and modular user interfaces becomes a seamless process.
 
-TODO: Delete this and the text above, and describe your gem
+Key Features:
 
-## Installation
+- **View Components:** Leverage the strength of view components to create reusable and encapsulated UI elements, promoting cleaner and more maintainable code.
+- **Modularity:** Alveole encourages modular design, allowing developers to effortlessly organize and manage complex interfaces by breaking them down into manageable components.
+- **Flexibility:** Easily integrate Alveole into your Ruby on Rails application, unlocking the potential to streamline your frontend development workflow.
+- **Community-Driven:** Benefit from a growing community of developers contributing to and supporting Alveole, ensuring continuous improvement and updates.
 
-Add this line to your application's Gemfile:
+Whether you're a seasoned developer or just starting, Alveole empowers you to build web applications with efficiency and elegance. Elevate your development experience with Alveole's view components, bringing simplicity and clarity to your codebase.
 
-```ruby
-gem 'alveole'
-```
-
-And then execute:
-
-    $ bundle install
-
-Or install it yourself as:
+## Usage
 
-    $ gem install alveole
+How to use my plugin.
 
-## Usage
+## Installation
 
-TODO: Write usage instructions here
+1. Add this line to your application's Gemfile:
 
-## Development
+```ruby
+gem "alveole"
+```
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+And then execute:
+```bash
+$ bundle
+```
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+2. Install Flowbite : https://flowbite.com/docs/getting-started/rails/
 
 ## Contributing
+Contribution directions go here.
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/alveole. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/[USERNAME]/alveole/blob/master/CODE_OF_CONDUCT.md).
-
+Pour lancer le projet, il faut utiliser la commande `bin/rails app:tailwind_engine_watch` pour compiler le css
 
 ## License
-
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-
-## Code of Conduct
-
-Everyone interacting in the Alveole project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/alveole/blob/master/CODE_OF_CONDUCT.md).

data/Rakefile

@@ -1,10 +1,8 @@
-require 'bundler/gem_tasks'
-require 'rake/testtask'
+require "bundler/setup"
 
-Rake::TestTask.new(:test) do |t|
-  t.libs << 'test'
-  t.libs << 'lib'
-  t.test_files = FileList['test/**/*_test.rb']
-end
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
 
-task default: :test
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/assets/config/alveole_manifest.js

@@ -0,0 +1,5 @@
+//= link_directory ../stylesheets/alveole .css
+//= link_tree ../builds/ .css
+//= link_tree ../javascripts/alveole .js
+//= link_tree ../images/alveole/ .png
+

data/app/assets/javascripts/alveole/application.js

@@ -0,0 +1,10 @@
+import 'flowbite';
+import 'flowbite-datepicker';
+
+import SlimSelect from 'slim-select';
+
+console.log("Alveole load !");
+
+new SlimSelect({
+  select: 'select'
+})

data/app/assets/stylesheets/alveole/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/

data/app/components/alveole/button_component.html.erb

@@ -0,0 +1,10 @@
+<alv-button class="inline-flex">
+  <%= link_to(@href, class: "flex items-center justify-center w-1/2 px-5 py-2 font-medium text-sm transition-colors duration-200 rounded-md w-auto gap-x-2 #{@base_class}") do %>
+    <% if @icon %>
+      <%= render(@icon) %>
+      <span><%= content %></span>
+    <% else %>
+      <% content %>
+    <% end %>
+  <% end %>
+</alv-button>

data/app/components/alveole/button_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+class Alveole::ButtonComponent < ViewComponent::Base
+  CLASS_BY_TYPE = {
+    primary: {
+      base: "border",
+      colors: {
+        primary: "text-white bg-primary-500 hover:bg-primary-600 dark:hover:bg-primary-500 dark:bg-primary-600",
+        green: "text-white bg-green-500 hover:bg-green-600 dark:hover:bg-green-500 dark:bg-green-600",
+        dark: "text-white bg-gray-800 hover:bg-gray-900 dark:hover:bg-gray-500 dark:bg-gray-600",
+      }
+    },
+    secondary: {
+      base: "border",
+      colors: {
+        primary: "text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800",
+        green: "text-gray-700 border-green-500 bg-white hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800",
+        dark: "text-gray-800 border-gray-800 bg-white hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800",
+      }
+    },
+    tertiary: {
+      base: "hover:bg-gray-50 focus:bg-gray-100",
+      colors: {
+        primary: "text-primary-700 dark:text-gray-200 dark:focus:bg-gray-800",
+        green: "text-green-700 dark:text-gray-200 dark:focus:bg-gray-800",
+        dark: "text-gray-800 dark:text-gray-200 dark:focus:bg-gray-800",
+      }
+    }
+  }
+  TYPES = [:primary, :secondary, :tertiary]
+
+  def initialize(href: "#", disabled: false, type: :default, color: :primary, icon: nil)
+    @href = href
+    @color = color
+    @base_class = get_class(type, color)
+    @icon = IconComponent.new(icon, class: "-ml-0.5 w-5 h-5") if icon
+  end
+
+  private
+
+  def get_class(type, color)
+    raise "Type invalide" unless TYPES.include?(type)
+
+    CLASS_BY_TYPE[type][:base] + " " + CLASS_BY_TYPE[type][:colors][color]
+  end
+end

data/app/components/alveole/chip_component.html.erb

@@ -0,0 +1,3 @@
+<alv-chip class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset <%= @class_size %> <%= @class_color %>">
+  <%= @label %>
+</alv-chip>

data/app/components/alveole/chip_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class Alveole::ChipComponent < ViewComponent::Base
+  def initialize(label:, color: :default, size: :sm)
+    @label = label
+    @color = color
+    @class_color = CLASS_COLOR[color.to_sym]
+    @class_size = CLASS_SIZE[size.to_sym]
+  end
+
+  CLASS_COLOR = {
+    default: "bg-gray-50 ring-gray-500/10 text-gray-600",
+    error: "bg-red-50 text-red-700 ring-red-600/10",
+    warning: "bg-yellow-50 text-yellow-800 ring-yellow-600/20",
+    success: "bg-green-50 text-green-700 ring-green-600/20",
+    info: "bg-blue-50 text-blue-700 ring-blue-700/10",
+    primary: "bg-primary-50 text-primary-700 ring-primary-700/10",
+  }
+  CLASS_SIZE = {
+    sm: "text-sm gap-x-2",
+    xs: "text-xs"
+  }
+end

data/app/components/alveole/dropdown/menu_item_component.html.erb

@@ -0,0 +1,2 @@
+<alv-menu-item>
+</alv-menu-item>

data/app/components/alveole/dropdown/menu_item_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class Alveole::Dropdown::MenuItemComponent < ViewComponent::Base
+
+end

data/app/components/alveole/dropdown_component.html.erb

@@ -0,0 +1,27 @@
+<alv-dropdown>
+  <button id="dropdownDividerButton" data-dropdown-toggle="dropdownDivider" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
+    Dropdown divider
+    <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+    </svg>
+  </button>
+
+  <!-- Dropdown menu -->
+  <div id="dropdownDivider" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
+    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDividerButton">
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
+      </li>
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
+      </li>
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
+      </li>
+    </ul>
+    <div class="py-2">
+      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Separated link</a>
+    </div>
+  </div>
+
+</alv-dropdown>

data/app/components/alveole/dropdown_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Alveole::DropdownComponent < ViewComponent::Base
+  # renders_many :items, types: {
+  #   item: {
+  #     renders: lambda { |**system_arguments, &block|
+  #       Alveole::Sidebar::ItemComponent.new(
+  #         **system_arguments,
+  #         &block
+  #       )
+  #     },
+
+  #     as: :item
+  #   },
+
+  #   divider: {
+  #     renders: Alveole::Sidebar::DividerComponent,
+  #     as: :divider
+  #   }
+  # }
+end

data/app/components/alveole/footer/link_component.html.erb

@@ -0,0 +1,6 @@
+<alv-footer-link>
+  <a href="<%= @href %>" target="_blank" class="text-gray-400 hover:text-gray-500">
+    <span class="sr-only"><%= @name %></span>
+    <%= image_tag 'alveole/icons/favicon-150.png', class: "h-6" %>
+  </a>
+</alv-footer-link>

data/app/components/alveole/footer/link_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Alveole::Footer::LinkComponent < ViewComponent::Base
+  def initialize(name:, href:)
+    @name = name
+    @href = href
+  end
+end

data/app/components/alveole/footer_component.html.erb

@@ -0,0 +1,14 @@
+<alv-footer class="block">
+  <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
+    <div class="flex justify-center space-x-6 md:order-2">
+      <% links.each do |link| %>
+        <%= link %>
+      <% end %>
+    </div>
+    <div class="mt-8 md:order-1 md:mt-0">
+      <p class="text-center text-xs leading-5 text-gray-500">
+        <%= @copyright_notice %>
+      </p>
+    </div>
+  </div>
+</alv-footer>

data/app/components/alveole/footer_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Alveole::FooterComponent < ViewComponent::Base
+  renders_many :links, Alveole::Footer::LinkComponent
+
+  def initialize(copyright_notice:)
+    @copyright_notice = copyright_notice
+  end
+end

data/app/components/alveole/form_layout_component.html.erb

@@ -0,0 +1,32 @@
+<alv-form-layout>
+  <%= simple_form_for @form_record, html: { enctype: "multipart/form-data" }, data: { turbo: false } do |f| %>
+    <% @f = f %>
+
+    <div class="space-y-12">
+      <div class="border-b border-gray-900/10 pb-8">
+        <% if @title %>
+          <h2 class="text-base font-semibold leading-7 text-gray-900"><%= @title %></h2>
+        <% end %>
+        <% if @description %>
+          <p class="mt-1 text-sm leading-6 text-gray-600"><%= @description %></p>
+        <% end %>
+
+        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 <%= @description || @title ? "mt-10" : "" %>">
+          <%= content %>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <%
+        cancel_url = if @record.persisted?
+          show_path_for(@record, prefix: :admin)
+        else
+          index_path_for(@record, prefix: :admin)
+        end
+      %>
+      <%= link_to "Cancel", cancel_url, class: "text-sm font-semibold leading-6 text-gray-900" %>
+      <%= f.button :submit, class: "cursor-pointer rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600" %>
+    </div>
+  <% end %>
+</alv-form-layout>

data/app/components/alveole/form_layout_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class Alveole::FormLayoutComponent < ViewComponent::Base
+  include AutoUrlHelper
+
+  def initialize(record, title: nil, description: nil)
+    @record = record&.last
+    @form_record = record
+    @title = title
+    @description = description
+  end
+
+  INPUT_CLASS = {
+    string: Alveole::Input::TextComponent,
+    email: Alveole::Input::EmailComponent,
+    text: Alveole::Input::TextareaComponent,
+    search: Alveole::Input::SearchComponent,
+    comment: Alveole::Input::CommentComponent,
+    avatar: Alveole::Input::AvatarComponent,
+    file: Alveole::Input::FileComponent,
+    counter: Alveole::Input::CounterComponent,
+    select: Alveole::Input::SelectComponent,
+  }
+  def input(attribute, **args)
+    input_component = input_component(attribute, args[:as])
+    render(input_component.new(@f, attribute, args))
+  end
+
+  private
+
+  def input_component(attribute, as)
+    as ||= default_input_type(attribute, as)
+
+    INPUT_CLASS[as].presence || Input::TextComponent
+  end
+
+  def default_input_type(attribute, as)
+    as = :avatar if attribute.to_sym == :avatar
+    as = :email if attribute.to_sym == :email
+    as = :counter if [:quantity].include?(attribute.to_sym)
+    as ||= :string
+  end
+end

data/app/components/alveole/icon_component.html.erb

@@ -0,0 +1 @@
+<div>Add Icon template here</div>

data/app/components/alveole/icon_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+# require 'inline_svg'
+
+class Alveole::IconComponent < ViewComponent::Base
+  include InlineSvg::ActionView
+
+  def initialize(name, **args)
+    @name = format_name(name.to_s)
+    @options = args
+  end
+
+  def format_name(name)
+    base_folder = "icons/"
+    name = base_folder + name
+    return name if name.end_with?(".svg")
+
+    name + ".svg"
+  end
+end

data/app/components/alveole/input/avatar_component.html.erb

@@ -0,0 +1,16 @@
+<alv-input-avatar>
+  <%= f.label @attribute, class: "block text-sm font-medium leading-6 text-gray-900" %>
+  <div class="mt-2 flex items-center gap-x-3">
+    <%
+      url = if f.object.send(@attribute).attached?
+        url_for(f.object.send(@attribute))
+      end
+    %>
+    <%= render(AvatarComponent.new(src: url))%>
+    <label for="utilisateur_avatar">
+      <div class="inline-block cursor-pointer rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Change</div>
+    <label>
+  </div>
+  <%= f.input_field @attribute, as: :hidden, type: :file, accept: "image/*" %>
+  
+</alv-input-avatar>

data/app/components/alveole/input/avatar_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Alveole::Input::AvatarComponent < Alveole::Input::BaseComponent
+end

data/app/components/alveole/input/base_component.rb

@@ -0,0 +1,16 @@
+class Alveole::Input::BaseComponent < ViewComponent::Base
+  attr_reader :f
+
+  def initialize(form, attribute, args = {})
+    @f = form
+    @attribute = attribute
+    @args = args
+    resource_name = form.object.class.to_s.underscore
+    @id = "#{resource_name}_#{attribute.to_s.underscore}"
+    @required = args[:required].presence || false
+  end
+
+  def errors?
+    f.object.errors[@attribute].present?
+  end
+end