css-zero 0.0.56 → 0.0.57

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dda2e775427e1ef39365fd7d86e67435f9a7b9537772871544b05f675ef1fab3
-  data.tar.gz: 382243e0f4441e706606aac3b8a646b163ef38642e17dcc9a620358b8925a3aa
+  metadata.gz: f36de6d1d6734c0b993d5cb5408229b47934e2e6725fb995e8507deb6ebd7840
+  data.tar.gz: c60d2d2df8617f7a1bb53cfa4c19f935531b73675402b807d7090ea6cf03a6cb
 SHA512:
-  metadata.gz: 5b44ccc95deabacf46b16f71f2ce72112104d3c4dc223bcb9f73e2ac7ad354e95cf18ee2efd07e236f7e5ba674d8d1b3b9ae38a47193ef144b68330df30eefdd
-  data.tar.gz: 63c113d51c33d46a9d26a3e73865f201d1083cae21797eb2b2d9b22f29e307bb94079b104c163d9fb49c0982e22fa8febefefba798a82481f6cf490c3be239d6
+  metadata.gz: c726280266ad97bad3a106ba0000ae34d9e30c6adf6284ad6d7ab74d38d01d1d0f4f48bed7008232e5d11ce527e1afd49721a6aae7cf819353844bae8d16b39b
+  data.tar.gz: 2a64d4b5136d1600edfb47f7c52bf71e873e35d4a7ed59a9bc4cb4cf0593a467ccca1f13d8ab5ec1ee17cb6b98173a00b44f0f0b2c53f617b4cedea5c27682d7

data/README.md

@@ -10,58 +10,18 @@ Add this gem to your project.
 bundle add css-zero
 ```
 
-Add the base.css file to your application.
+Run the install command.
 
 ```
 bin/rails generate css_zero:install
 ```
 
-Add only the components you need. (Optional)
+Add the additional components you need.
 
 ```
 bin/rails generate css_zero:add --help
-bin/rails generate css_zero:add layouts flash button input switch table ...
 ```
 
-### Requirements
-
-If you are using [Propshaft](https://github.com/rails/propshaft) (recommended) make sure to load all the CSS files in your layout.html.erb.
-
-<details>
-  <summary>Click here to see how</summary>
-
-```html+erb
-<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
-```
-</details>
-
-If you are using [Sprockets](https://github.com/rails/sprockets) make sure to load all the CSS files in your application.css.
-
-<details>
-  <summary>Click here to see how</summary>
-
-```
-/*
-*= require _reset
-*= require animations
-*= require borders
-*= require colors
-*= require effects
-*= require filters
-*= require grid
-*= require sizes
-*= require transform
-*= require transition
-*= require typography
-*= require_tree .
-*= require_self
-*= require zutilities
-*/
-```
-</details>
-
-Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
-
 ## Usage
 
 ```html
@@ -88,6 +48,10 @@ Some icons in the examples are not copied to the project. If you are looking for
 
 Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
 
+## Icons
+
+Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
+
 ## Components
 
 [<img src="https://github.com/user-attachments/assets/3a7fbd1e-5cc8-4476-a60c-52bc28efca29">](https://csszero.lazaronixon.com)

data/lib/css_zero/engine.rb

@@ -1,4 +1,11 @@
 module CssZero
   class Engine < ::Rails::Engine
+    initializer "css_zero.disable_generator_stylesheets" do
+      Rails.application.config.generators.stylesheets = false
+    end
+
+    config.app_generators do |g|
+      g.template_engine :css_zero
+    end
   end
 end

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.56"
+  VERSION = "0.0.57"
 end

data/lib/generators/css_zero/add/templates/app/javascript/controllers/chart_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { Chart, Colors, registerables } from "https://cdn.skypack.dev/chart.js@4.4.6"
+import { Chart, registerables } from "https://cdn.skypack.dev/chart.js@4.4.6"
 
 Chart.register(...registerables)
 

data/lib/generators/css_zero/authentication/authentication_generator.rb

@@ -0,0 +1,9 @@
+require "rails/generators/erb/authentication/authentication_generator"
+
+module CssZero
+  module Generators
+    class AuthenticationGenerator < Erb::Generators::AuthenticationGenerator
+      source_root File.expand_path("templates", __dir__)
+    end
+  end
+end

data/lib/generators/css_zero/authentication/templates/app/views/passwords/edit.html.erb.tt

@@ -0,0 +1,11 @@
+<%% if alert.present? %>
+  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= alert %></div>
+<%% end %>
+
+<h1 class="font-bold text-4xl mbe-4">Update your password</h1>
+
+<%%= form_with url: password_path(params[:token]), method: :put, class: "flex flex-col gap" do |form| %>
+  <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "input" %>
+  <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "input" %>
+  <%%= form.submit "Save", class: "btn btn--primary i-min" %>
+<%% end %>

data/lib/generators/css_zero/authentication/templates/app/views/passwords/new.html.erb.tt

@@ -0,0 +1,10 @@
+<%% if alert.present? %>
+  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= alert %></div>
+<%% end %>
+
+<h1 class="font-bold text-4xl mbe-4">Forgot your password?</h1>
+
+<%%= form_with url: passwords_path, class: "flex flex-col gap" do |form| %>
+  <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "input" %>
+  <%%= form.submit "Email reset instructions", class: "btn btn--primary i-min" %>
+<%% end %>

data/lib/generators/css_zero/authentication/templates/app/views/sessions/new.html.erb.tt

@@ -0,0 +1,19 @@
+<%% if alert.present? %>
+  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= alert %></div>
+<%% end %>
+
+<%% if notice.present? %>
+  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= notice %></div>
+<%% end %>
+
+<h1 class="font-bold text-4xl mbe-4">Sign in</h1>
+
+<%%= form_with url: session_url, class: "flex flex-col gap" do |form| %>
+  <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "input" %>
+  <%%= form.password_field :password, required: true, autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72, class: "input" %>
+
+  <div class="flex items-center gap">
+    <%%= form.submit "Sign in", class: "btn btn--primary" %>
+    <%%= link_to "Forgot password?", new_password_path, class: "text-sm font-medium underline" %>
+  </div>
+<%% end %>

data/lib/generators/css_zero/install/install_generator.rb

@@ -1,9 +1,33 @@
 require "rails/generators/named_base"
 
 class CssZero::InstallGenerator < Rails::Generators::Base
+  include Rails::Generators::AppName
+
   source_root File.expand_path("templates", __dir__)
 
   def copy_base_css
     copy_file "app/assets/stylesheets/base.css"
   end
+
+  def copy_application_css
+    copy_file "app/assets/stylesheets/application.css", force: true if sprockets?
+  end
+
+  def copy_application_layout
+    template "app/views/layouts/application.html.erb", force: true
+  end
+
+  def add_basic_components
+    invoke "css_zero:add", %w(layouts input switch button flash alert)
+  end
+
+  private
+
+  def importmaps?
+    Rails.root.join("config/importmap.rb").exist?
+  end
+
+  def sprockets?
+    Rails.root.join("app/assets/config/manifest.js").exist?
+  end
 end

data/lib/generators/css_zero/install/templates/app/assets/stylesheets/application.css

@@ -0,0 +1,27 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS (and SCSS, if configured) file within this directory, lib/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
+ * 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 _reset
+ *= require animations
+ *= require borders
+ *= require colors
+ *= require effects
+ *= require filters
+ *= require grid
+ *= require sizes
+ *= require transform
+ *= require transition
+ *= require typography
+ *= require_tree .
+ *= require_self
+ *= require zutilities
+ */

data/lib/generators/css_zero/install/templates/app/views/layouts/application.html.erb

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%%= content_for(:title) || "<%= app_name.titleize %>" %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <%%= csrf_meta_tags %>
+    <%%= csp_meta_tag %>
+
+    <%%= yield :head %>
+
+    <%%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
+    <%%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
+
+    <link rel="icon" href="/icon.png" type="image/png">
+    <link rel="icon" href="/icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/icon.png">
+
+    <%- style_link_target = sprockets? ? "\"application\"" : ":all" -%>
+    <%%# Includes all stylesheet files in app/assets/stylesheets %>
+    <%%= stylesheet_link_tag <%= style_link_target %>, "data-turbo-track": "reload" %>
+    <%- if importmaps? -%>
+    <%%= javascript_importmap_tags %>
+    <%- else -%>
+    <%%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
+    <%- end -%>
+  </head>
+
+  <body class="header-layout">
+    <header id="header">
+      <div class="container">
+        <h1 class="font-bold text-2xl"><%= app_name.titleize %></h1>
+      </div>
+    </header>
+
+    <main id="main">
+      <div class="container">
+        <%%= yield %>
+      </div>
+    </main>
+  </body>
+</html>

data/lib/generators/css_zero/scaffold/controller/controller_generator.rb

@@ -0,0 +1,10 @@
+require "rails/generators/erb/controller/controller_generator"
+
+module CssZero
+  module Generators
+    class ControllerGenerator < Erb::Generators::ControllerGenerator
+      source_root File.expand_path("templates", __dir__)
+      source_paths << "lib/templates/erb/controller"
+    end
+  end
+end

data/lib/generators/css_zero/scaffold/controller/templates/view.html.erb.tt

@@ -0,0 +1,4 @@
+<div>
+  <h1 class="font-bold text-4xl"><%= class_name %>#<%= @action %></h1>
+  <p>Find me in <%= @path %></p>
+</div>

data/lib/generators/css_zero/scaffold/mailer/mailer_generator.rb

@@ -0,0 +1,10 @@
+require "rails/generators/erb/mailer/mailer_generator"
+
+module CssZero
+  module Generators
+    class MailerGenerator < Erb::Generators::MailerGenerator
+      source_root File.expand_path("templates", __dir__)
+      source_paths << "lib/templates/erb/mailer"
+    end
+  end
+end

data/lib/generators/css_zero/scaffold/mailer/templates/layout.html.erb.tt

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <style>
+      /* Email styles need to be inline */
+    </style>
+  </head>
+
+  <body>
+    <%%= yield %>
+  </body>
+</html>

data/lib/generators/css_zero/scaffold/mailer/templates/layout.text.erb.tt

@@ -0,0 +1 @@
+<%%= yield %>

data/lib/generators/css_zero/scaffold/mailer/templates/view.html.erb.tt

@@ -0,0 +1,5 @@
+<h1><%= class_name %>#<%= @action %></h1>
+
+<p>
+  <%%= @greeting %>, find me in <%= @path %>
+</p>

data/lib/generators/css_zero/scaffold/mailer/templates/view.text.erb.tt

@@ -0,0 +1,3 @@
+<%= class_name %>#<%= @action %>
+
+<%%= @greeting %>, find me in <%= @path %>

data/lib/generators/css_zero/scaffold/scaffold_generator.rb

@@ -0,0 +1,35 @@
+require "rails/generators/erb/scaffold/scaffold_generator"
+require "rails/generators/resource_helpers"
+
+module CssZero
+  module Generators
+    class ScaffoldGenerator < Erb::Generators::ScaffoldGenerator
+      include Rails::Generators::ResourceHelpers
+
+      source_root File.expand_path("templates", __dir__)
+      source_paths << "lib/templates/erb/scaffold"
+
+      argument :attributes, type: :array, default: [], banner: "field:type field:type"
+
+      def create_root_folder
+        empty_directory File.join("app/views", controller_file_path)
+      end
+
+      def copy_view_files
+        available_views.each do |view|
+          formats.each do |format|
+            filename = filename_with_extensions(view, format)
+            template filename, File.join("app/views", controller_file_path, filename)
+          end
+        end
+
+        template "partial.html.erb", File.join("app/views", controller_file_path, "_#{singular_name}.html.erb")
+      end
+
+      private
+        def available_views
+          %w(index edit show new _form)
+        end
+    end
+  end
+end

data/lib/generators/css_zero/scaffold/templates/_form.html.erb.tt

@@ -0,0 +1,43 @@
+<%%= form_with(model: <%= model_resource_name %>, html: { contents: true }) do |form| %>
+  <%% if <%= singular_table_name %>.errors.any? %>
+    <div class="alert alert--negative flex flex-col gap-half mbe-4" role="alert">
+      <h2 class="font-medium leading-none"><%%= pluralize(<%= singular_table_name %>.errors.count, "error") %> prohibited this <%= singular_table_name %> from being saved:</h2>
+
+      <ul class="text-sm mis-3" style="list-style: disc">
+        <%% <%= singular_table_name %>.errors.each do |error| %>
+          <li><%%= error.full_message %></li>
+        <%% end %>
+      </ul>
+    </div>
+  <%% end %>
+
+<% attributes.each do |attribute| -%>
+  <div class="flex flex-col gap-half mbe-4">
+<% if attribute.password_digest? -%>
+    <%%= form.label :password, class: "text-sm font-medium leading-none" %>
+    <%%= form.password_field :password, class: "input" %>
+  </div>
+
+  <div class="flex flex-col gap-half mbe-4">
+    <%%= form.label :password_confirmation, class: "text-sm font-medium leading-none" %>
+    <%%= form.password_field :password_confirmation, class: "input" %>
+<% elsif attribute.attachments? -%>
+    <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "input" %>
+<% elsif attribute.field_type == :textarea -%>
+    <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: "auto", class: "input" %>
+<% elsif attribute.field_type == :checkbox -%>
+    <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "switch" %>
+<% else -%>
+    <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "input" %>
+<% end -%>
+  </div>
+
+<% end -%>
+  <div class="inline-flex items-center mbs-2 mie-1">
+    <%%= form.button tag.span("Save changes"), class: "btn btn--primary btn--loading" %>
+  </div>
+<%% end %>

data/lib/generators/css_zero/scaffold/templates/edit.html.erb.tt

@@ -0,0 +1,10 @@
+<%% content_for :title, "Editing <%= human_name.downcase %>" %>
+
+<h1 class="font-bold text-4xl mbe-4">Editing <%= human_name.downcase %></h1>
+
+<%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
+
+<div class="inline-flex flex-wrap items-center gap mbs-2" style="--row-gap: .5rem">
+  <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, class: "btn" %>
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn" %>
+</div>

data/lib/generators/css_zero/scaffold/templates/index.html.erb.tt

@@ -0,0 +1,19 @@
+<%% if notice.present? %>
+  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= notice %></div>
+<%% end %>
+
+<%% content_for :title, "<%= human_name.pluralize %>" %>
+
+<div class="flex items-center justify-between mbe-4">
+  <h1 class="font-bold text-4xl"><%= human_name.pluralize %></h1>
+  <%%= link_to "New <%= human_name.downcase %>", <%= new_helper(type: :path) %>, class: "btn btn--primary" %>
+</div>
+
+<div id="<%= plural_table_name %>" class="flex flex-col" style="gap: 2rem;">
+  <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
+    <div class="flex flex-col items-start gap">
+      <%%= render <%= singular_table_name %> %>
+      <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(singular_table_name) %>, class: "btn" %>
+    </div>
+  <%% end %>
+</div>

data/lib/generators/css_zero/scaffold/templates/new.html.erb.tt

@@ -0,0 +1,9 @@
+<%% content_for :title, "New <%= human_name.downcase %>" %>
+
+<h1 class="font-bold text-4xl mbe-4">New <%= human_name.downcase %></h1>
+
+<%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
+
+<div class="inline-flex flex-wrap items-center gap mbs-2" style="--row-gap: .5rem">
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn" %>
+</div>

data/lib/generators/css_zero/scaffold/templates/partial.html.erb.tt

@@ -0,0 +1,16 @@
+<div id="<%%= dom_id <%= singular_name %> %>" class="flex flex-col gap">
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <div class="flex flex-col gap-half">
+    <h4 class="font-medium leading-none"><%= attribute.human_name %>:</h4>
+<% if attribute.attachment? -%>
+    <%%= link_to <%= singular_name %>.<%= attribute.column_name %>.filename, <%= singular_name %>.<%= attribute.column_name %>, class: "font-medium underline" if <%= singular_name %>.<%= attribute.column_name %>.attached? %>
+<% elsif attribute.attachments? -%>
+    <%% <%= singular_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
+      <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %>, class: "font-medium underline" %></div>
+    <%% end %>
+<% else -%>
+    <p class="leading-none"><%%= <%= singular_name %>.<%= attribute.column_name %> %></p>
+<% end -%>
+  </div>
+<% end -%>
+</div>

data/lib/generators/css_zero/scaffold/templates/show.html.erb.tt

@@ -0,0 +1,11 @@
+<%% if notice.present? %>
+  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= notice %></div>
+<%% end %>
+
+<%%= render @<%= singular_table_name %> %>
+
+<div class="flex flex-wrap items-center gap mbs-6" style="--row-gap: .5rem">
+  <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "btn" %>
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn" %>
+  <%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, class: "btn" %>
+</div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.56
+  version: 0.0.57
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-11-03 00:00:00.000000000 Z
+date: 2024-11-06 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -111,9 +111,29 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js
+- lib/generators/css_zero/authentication/authentication_generator.rb
+- lib/generators/css_zero/authentication/templates/app/views/passwords/edit.html.erb.tt
+- lib/generators/css_zero/authentication/templates/app/views/passwords/new.html.erb.tt
+- lib/generators/css_zero/authentication/templates/app/views/sessions/new.html.erb.tt
 - lib/generators/css_zero/install/USAGE
 - lib/generators/css_zero/install/install_generator.rb
+- lib/generators/css_zero/install/templates/app/assets/stylesheets/application.css
 - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
+- lib/generators/css_zero/install/templates/app/views/layouts/application.html.erb
+- lib/generators/css_zero/scaffold/controller/controller_generator.rb
+- lib/generators/css_zero/scaffold/controller/templates/view.html.erb.tt
+- lib/generators/css_zero/scaffold/mailer/mailer_generator.rb
+- lib/generators/css_zero/scaffold/mailer/templates/layout.html.erb.tt
+- lib/generators/css_zero/scaffold/mailer/templates/layout.text.erb.tt
+- lib/generators/css_zero/scaffold/mailer/templates/view.html.erb.tt
+- lib/generators/css_zero/scaffold/mailer/templates/view.text.erb.tt
+- lib/generators/css_zero/scaffold/scaffold_generator.rb
+- lib/generators/css_zero/scaffold/templates/_form.html.erb.tt
+- lib/generators/css_zero/scaffold/templates/edit.html.erb.tt
+- lib/generators/css_zero/scaffold/templates/index.html.erb.tt
+- lib/generators/css_zero/scaffold/templates/new.html.erb.tt
+- lib/generators/css_zero/scaffold/templates/partial.html.erb.tt
+- lib/generators/css_zero/scaffold/templates/show.html.erb.tt
 homepage: https://github.com/lazaronixon/css-zero
 licenses:
 - MIT