material_view_components 0.1.1

data/app/assets/config/material_view_components_manifest.js

@@ -0,0 +1 @@
+//= link_tree ../builds

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

@@ -0,0 +1,182 @@
+:root {
+	/* Material Design 3 colors */
+	--material-color-primary: #6750A4;
+	--material-color-primary-on-dark: #D0BCFF;
+	--material-color-primary-container: #EADDFF;
+	--material-color-primary-container-on-dark: #4F378B;
+	--material-color-secondary: #625B71;
+	--material-color-secondary-on-dark: #CCC2DC;
+	--material-color-secondary-container: #E8DEF8;
+	--material-color-secondary-container-on-dark: #4A4458;
+	--material-color-tertiary: #7D5260;
+	--material-color-tertiary-on-dark: #EFB8C8;
+	--material-color-tertiary-container: #FFD8E4;
+	--material-color-tertiary-container-on-dark: #633B48;
+	--material-color-surface: #FFFBFE;
+	--material-color-surface-on-dark: #1C1B1F;
+	--material-color-surface-variant: #E7E0EC;
+	--material-color-surface-variant-on-dark: #49454F;
+	--material-color-background: #FFFBFE;
+	--material-color-background-on-dark: #1C1B1F;
+	--material-color-error: #B3261E;
+	--material-color-error-on-dark: #F2B8B5;
+	--material-color-error-container: #F9DEDC;
+	--material-color-error-container-on-dark: #8C1D18;
+	--material-color-disabled-container: rgb(28 27 31 / 12%);
+	--material-color-disabled-container-on-dark: rgb(230 225 229 / 12%);
+	--material-color-on-primary: #FFFFFF;
+	--material-color-on-primary-on-dark: #371E73;
+	--material-color-on-primary-container: #21005E;
+	--material-color-on-primary-container-on-dark: #EADDFF;
+	--material-color-on-secondary: #FFFFFF;
+	--material-color-on-secondary-on-dark: #332D41;
+	--material-color-on-secondary-container: #1E192B;
+	--material-color-on-secondary-container-on-dark: #E8DEF8;
+	--material-color-on-tertiary: #FFFFFF;
+	--material-color-on-tertiary-on-dark: #492532;
+	--material-color-on-tertiary-container: #370B1E;
+	--material-color-on-tertiary-container-on-dark: #FFD8E4;
+	--material-color-on-surface: #1C1B1F;
+	--material-color-on-surface-on-dark: #E6E1E5;
+	--material-color-on-surface-variant: #49454E;
+	--material-color-on-surface-variant-on-dark: #CAC4D0;
+	--material-color-on-background: #1C1B1F;
+	--material-color-on-background-on-dark: #E6E1E5;
+	--material-color-on-error: #FFFFFF;
+	--material-color-on-error-on-dark: #601410;
+	--material-color-on-error-container: #370B1E;
+	--material-color-on-error-container-on-dark: #F9DEDC;
+	--material-color-outline: #79747E;
+	--material-color-outline-on-dark: #938F99;
+	--material-color-outline-disabled: rgb(121 116 126 / 12%);
+	--material-color-outline-disabled-on-dark: rgb(147 143 153 / 12%);
+	--material-color-shadow: #000000;
+	--material-color-inverse-surface: #313033;
+	--material-color-inverse-surface-on-dark: #E6E1E5;
+	--material-color-inverse-on-surface: #F4EFF4;
+	--material-color-inverse-on-surface-on-dark: #313033;
+	--material-color-inverse-primary: #D0BCFF;
+	--material-color-inverse-primary-on-dark: #6750A4;
+
+	/* Material Design 3 typography */
+	--material-typeface-brand-regular: "Roboto";
+	--material-typeface-weight-regular: 400;
+	--material-typeface-plain-medium: "Roboto";
+	--material-typeface-weight-medium: 500;
+
+	/* Display large */
+	--material-typescale-display-large-font: var(--material-typeface-brand-regular);
+	--material-typescale-display-large-line-height: 4rem;
+	--material-typescale-display-large-size: 3.5625rem;
+	--material-typescale-display-large-tracking: 0rem;
+	--material-typescale-display-large-weight: var(--material-typeface-weight-regular);
+
+	/* Display medium */
+	--material-typescale-display-medium-font: var(--material-typeface-brand-regular);
+	--material-typescale-display-medium-line-height: 3.25rem;
+	--material-typescale-display-medium-size: 2.8125rem;
+	--material-typescale-display-medium-tracking: 0rem;
+	--material-typescale-display-medium-weight: var(--material-typeface-weight-regular);
+
+	/* Display small */
+	--material-typescale-display-small-font: var(--material-typeface-brand-regular);
+	--material-typescale-display-small-line-height: 2.75rem;
+	--material-typescale-display-small-size: 2rem;
+	--material-typescale-display-small-tracking: 0rem;
+	--material-typescale-display-small-weight: var(--material-typeface-weight-regular);
+
+	/* Headline large */
+	--material-typescale-headline-large-font: var(--material-typeface-brand-regular);
+	--material-typescale-headline-large-line-height: 2.5rem;
+	--material-typescale-headline-large-size: 2rem;
+	--material-typescale-headline-large-tracking: 0rem;
+	--material-typescale-headline-large-weight: var(--material-typeface-weight-regular);
+
+	/* Headline medium */
+	--material-typescale-headline-medium-font: var(--material-typeface-brand-regular);
+	--material-typescale-headline-medium-line-height: 2.25rem;
+	--material-typescale-headline-medium-size: 1.75rem;
+	--material-typescale-headline-medium-tracking: 0rem;
+	--material-typescale-headline-medium-weight: var(--material-typeface-weight-regular);
+
+	/* Headline small */
+	--material-typescale-headline-small-font: var(--material-typeface-brand-regular);
+	--material-typescale-headline-small-line-height: 2rem;
+	--material-typescale-headline-small-size: 1.5rem;
+	--material-typescale-headline-small-tracking: 0rem;
+	--material-typescale-headline-small-weight: var(--material-typeface-weight-regular);
+
+	/* Title large */
+	--material-typescale-title-large-font: var(--material-typeface-brand-regular);
+	--material-typescale-title-large-line-height: 1.75rem;
+	--material-typescale-title-large-size: 1.375rem;
+	--material-typescale-title-large-tracking: 0rem;
+	--material-typescale-title-large-weight: var(--material-typeface-weight-regular);
+
+	/* Title medium */
+	--material-typescale-title-medium-font: var(--material-typeface-plain-medium);
+	--material-typescale-title-medium-line-height: 1.5rem;
+	--material-typescale-title-medium-size: 1rem;
+	--material-typescale-title-medium-tracking: 0.0094rem;
+	--material-typescale-title-medium-weight: var(--material-typeface-weight-medium);
+
+	/* Title small */
+	--material-typescale-title-small-font: var(--material-typeface-brand-regular);
+	--material-typescale-title-small-line-height: 1.75rem;
+	--material-typescale-title-small-size: 1.375rem;
+	--material-typescale-title-small-tracking: 0rem;
+	--material-typescale-title-small-weight: var(--material-typeface-weight-regular);
+
+	/* Label large */
+	--material-typescale-label-large-font: var(--material-typeface-plain-medium);
+	--material-typescale-label-large-line-height: 1.25rem;
+	--material-typescale-label-large-size: 0.875rem;
+	--material-typescale-label-large-tracking: 0.0063rem;
+	--material-typescale-label-large-weight: var(--material-typeface-weight-medium);
+
+	/* Label medium */
+	--material-typescale-label-medium-font: var(--material-typeface-plain-medium);
+	--material-typescale-label-medium-line-height: 1rem;
+	--material-typescale-label-medium-size: 0.75rem;
+	--material-typescale-label-medium-tracking: 0.0063rem;
+	--material-typescale-label-medium-weight: var(--material-typeface-weight-medium);
+
+	/* Label small */
+	--material-typescale-label-small-font: var(--material-typeface-plain-medium);
+	--material-typescale-label-small-line-height: 0.375rem;
+	--material-typescale-label-small-size: 0.6875rem;
+	--material-typescale-label-small-tracking: 0.0313rem;
+	--material-typescale-label-small-weight: var(--material-typeface-weight-medium);
+
+	/* Body large */
+	--material-typescale-body-large-font: var(--material-typeface-plain-medium);
+	--material-typescale-body-large-line-height: 1.5rem;
+	--material-typescale-body-large-size: 1rem;
+	--material-typescale-body-large-tracking: 0.0094rem;
+	--material-typescale-body-large-weight: var(--material-typeface-weight-regular);
+
+	/* Body medium */
+	--material-typescale-body-medium-font: var(--material-typeface-plain-medium);
+	--material-typescale-body-medium-line-height: 1.25rem;
+	--material-typescale-body-medium-size: 0.875rem;
+	--material-typescale-body-medium-tracking: 0.0156rem;
+	--material-typescale-body-medium-weight: var(--material-typeface-weight-regular);
+
+	/* Body small */
+	--material-typescale-body-small-font: var(--material-typeface-plain-medium);
+	--material-typescale-body-small-line-height: 1rem;
+	--material-typescale-body-small-size: 0.75rem;
+	--material-typescale-body-small-tracking: 0.025rem;
+	--material-typescale-body-small-weight: var(--material-typeface-weight-regular);
+
+	/* Material Design overlay opacity values */
+	--material-state-hover-overlay-opacity: 8%;
+	--material-state-focus-overlay-opacity: 12%;
+	--material-state-pressed-overlay-opacity: 12%;
+	--material-state-dragged-overlay-opacity: 16%;
+	--material-state-disabled-content-overlay-opacity: 38%;
+	--material-state-disabled-container-overlay-opacity: 12%;
+}
+
+@tailwind base;
+@tailwind utilities;

data/app/components/application_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class ApplicationComponent < ViewComponent::Base
+  def identifier
+    klass = self.class
+
+    klass.name
+      .tableize
+      .singularize
+      .gsub("/", "--")
+      .gsub("_", "-")
+  end
+
+  def sanitize(string)
+    string
+      .strip
+      .gsub(/\s{2,}|\n/, " ")
+  end
+end

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

@@ -0,0 +1,10 @@
+<%= button_to @name, @html_options.merge(form_class: "", class: container_classes, data: { controller: identifier }) do %>
+  <div class="<%= content_classes %>">
+    <%= icon %>
+    <%= text %>
+  </div>
+  <% unless disabled %>
+    <div class="<%= overlay_classes %>">
+    </div>
+  <% end %>
+<% end %>

data/app/components/material/button_component.rb

@@ -0,0 +1,190 @@
+# frozen_string_literal: true
+
+class Material::ButtonComponent < ApplicationComponent
+  renders_one :text, -> (text) do
+    content_tag :span do
+      text
+    end
+  end
+
+  renders_one :icon, -> (name = nil, &block) do
+    if block
+      content_tag :span, class: "material-pr-2" do
+        block.call
+      end
+    else
+      content_tag :span, class: "material-icons material-pr-2" do
+        name
+      end
+    end
+  end
+
+  attr_reader :disabled
+  attr_reader :button_type
+
+  def initialize(name = "", html_options = {}, disabled: false, button_type: :filled)
+    @name         = name
+    @html_options = disabled ? html_options.merge(disabled: "disabled") : html_options
+    @disabled     = disabled
+    @button_type  = button_type
+  end
+
+  def container_classes
+    send :"#{button_type}_button_container_classes"
+  end
+
+  def content_classes
+    send :"#{button_type}_button_content_classes"
+  end
+
+  def overlay_classes
+    send :"#{button_type}_button_overlay_classes"
+  end
+
+  private
+
+  def filled_button_container_classes
+    sanitize <<-CLASSES
+    material-relative #{icon ? "material-pl-4 material-pr-6" : "material-px-6"}
+    material-h-10  material-rounded-full #{disabled ?
+    "material-bg-disabled-container dark:material-bg-disabled-container-on-dark
+    material-cursor-default" : "material-bg-primary
+    dark:material-bg-primary-on-dark hover:material-shadow"}
+    CLASSES
+  end
+
+  def filled_button_content_classes
+    sanitize <<-CLASSES
+    material-flex material-items-center #{disabled ? "material-text-on-surface
+    dark:material-text-on-surface-on-dark material-opacity-disabled-content" :
+    "material-text-on-primary dark:material-text-on-primary-on-dark"}
+    material-text-label-large material-font-medium material-font-label
+    material-leading-label-large material-tracking-label-large
+    CLASSES
+  end
+
+  def filled_button_overlay_classes
+    sanitize <<-CLASSES
+    material-absolute material-w-full material-inset-0 material-rounded-full
+    material-bg-on-primary dark:material-bg-on-primary-on-dark
+    material-opacity-0 hover:material-opacity-hover focus:material-opacity-focus
+    active:material-opacity-pressed
+    CLASSES
+  end
+
+  def tonal_button_container_classes
+    sanitize <<-CLASSES
+    material-relative #{icon ? "material-pl-4 material-pr-6" : "material-px-6"}
+    material-h-10  material-rounded-full #{disabled ?
+    "material-bg-disabled-container dark:material-bg-disabled-container-on-dark
+    material-cursor-default" : "material-bg-secondary-container
+    dark:material-bg-secondary-container-on-dark hover:material-shadow"}
+    CLASSES
+  end
+
+  def tonal_button_content_classes
+    sanitize <<-CLASSES
+    material-flex material-items-center #{disabled ? "material-text-on-surface
+    dark:material-text-on-surface-on-dark material-opacity-disabled-content" :
+    "material-text-on-secondary-container dark:material-text-on-secondary-container-on-dark"}
+    material-text-label-large material-font-medium material-font-label
+    material-leading-label-large material-tracking-label-large
+    CLASSES
+  end
+
+  def tonal_button_overlay_classes
+    sanitize <<-CLASSES
+    material-absolute material-w-full material-inset-0 material-rounded-full
+    material-bg-on-surface dark:material-bg-on-surface-on-dark
+    material-opacity-0 hover:material-opacity-hover focus:material-opacity-focus
+    active:material-opacity-pressed
+    CLASSES
+  end
+
+  def outlined_button_container_classes
+    sanitize <<-CLASSES
+    material-relative #{icon ? "material-pl-4 material-pr-6" : "material-px-6"}
+    material-h-10 dark:material-outline-on-dark material-rounded-full
+    #{disabled ? "material-outline-disabled material-cursor-default
+    dark:material-outline-disabled-on-dark" : "material-bg-surface
+    dark:material-bg-surface-on-dark material-outline-default
+    hover:material-shadow"}
+    CLASSES
+  end
+
+  def outlined_button_content_classes
+    sanitize <<-CLASSES
+    material-flex material-items-center #{disabled ? "material-text-on-surface
+    dark:material-text-on-surface-on-dark material-opacity-disabled-content" :
+    "material-text-primary dark:material-text-primary-on-dark"}
+    material-text-label-large material-font-medium material-font-label
+    material-leading-label-large material-tracking-label-large
+    CLASSES
+  end
+
+  def outlined_button_overlay_classes
+    sanitize <<-CLASSES
+    material-absolute material-w-full material-inset-0 material-rounded-full
+    material-bg-primary dark:material-bg-primary-on-dark material-opacity-0
+    hover:material-opacity-hover focus:material-opacity-focus
+    active:material-opacity-pressed
+    CLASSES
+  end
+
+  def elevated_button_container_classes
+    sanitize <<-CLASSES
+    material-relative #{icon ? "material-pl-4 material-pr-6" : "material-px-6"}
+    material-h-10 material-rounded-full
+    #{disabled ? "material-bg-disabled-container
+    dark:material-bg-disabled-container-on-dark material-cursor-default" :
+    "material-bg-surface dark:material-bg-surface-on-dark material-shadow
+    hover:material-shadow-md"}
+    CLASSES
+  end
+
+  def elevated_button_content_classes
+    sanitize <<-CLASSES
+    material-flex material-items-center #{disabled ? "material-text-on-surface
+    dark:material-text-on-surface-on-dark material-opacity-disabled-content" :
+    "material-text-primary dark:material-text-primary-on-dark"}
+    material-text-label-large material-font-medium material-font-label
+    material-leading-label-large material-tracking-label-large
+    CLASSES
+  end
+
+  def elevated_button_overlay_classes
+    sanitize <<-CLASSES
+    material-absolute material-w-full material-inset-0 material-rounded-full
+    material-bg-primary dark:material-bg-primary-on-dark material-opacity-0
+    hover:material-opacity-hover focus:material-opacity-focus
+    active:material-opacity-pressed
+    CLASSES
+  end
+
+  def text_button_container_classes
+    sanitize <<-CLASSES
+    material-relative #{icon ? "material-pl-3 material-pr-4" : "material-px-3"}
+    material-h-10 material-rounded-full #{disabled ? "material-cursor-default" :
+    "hover:material-shadow"}
+    CLASSES
+  end
+
+  def text_button_content_classes
+    sanitize <<-CLASSES
+    material-flex material-items-center #{disabled ? "material-text-on-surface
+    dark:material-text-on-surface-on-dark material-opacity-disabled-content" :
+    "material-text-primary dark:material-text-primary-on-dark"}
+    material-text-label-large material-font-medium material-font-label
+    material-leading-label-large material-tracking-label-large
+    CLASSES
+  end
+
+  def text_button_overlay_classes
+    sanitize <<-CLASSES
+    material-absolute material-w-full material-inset-0 material-rounded-full
+    material-bg-primary dark:material-bg-primary-on-dark material-opacity-0
+    hover:material-opacity-hover focus:material-opacity-focus
+    active:material-opacity-pressed
+    CLASSES
+  end
+end

data/app/components/material/button_component_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    console.log("Hello, Stimulus!", this.element);
+  }
+}
+

data/app/components/material/fab_component.html.erb

@@ -0,0 +1,8 @@
+<%= button_to @name, @html_options.merge(form_class: "", class: container_classes, data: { controller: identifier }) do %>
+  <div class="<%= content_classes %>">
+    <%= icon %>
+  </div>
+
+  <div class="<%= overlay_classes %>">
+  </div>
+<% end %>

data/app/components/material/fab_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class Material::FABComponent < ApplicationComponent
+  renders_one :icon, -> (name) do
+    content_tag :span, class: "material-icons" do
+      name
+    end
+  end
+
+  def initialize(name = "", html_options = {})
+    @name         = name
+    @html_options = html_options
+  end
+
+  def container_classes
+    sanitize <<-CLASSES
+    material-relative material-flex material-items-center
+    material-justify-center material-h-56px material-w-56px
+    material-bg-primary-container dark:material-bg-primary-container-on-dark
+    material-rounded-xl material-elevation-3
+    CLASSES
+  end
+
+  def content_classes
+    sanitize <<-CLASSES
+    material-flex material-items-center material-justify-center
+    material-text-on-primary-container
+    dark:material-text-on-primary-container-on-dark
+    CLASSES
+  end
+
+  def overlay_classes
+    sanitize <<-CLASSES
+    material-absolute material-inset-0 material-w-full
+    material-bg-on-primary-container dark:material-bg-on-primary-on-dark
+    material-rounded-xl material-opacity-0 hover:material-opacity-hover
+    focus:material-opacity-focus active:material-opacity-pressed
+    hover:material-elevation-4 focus:material-elevation-3 active:material-elevation-3
+    CLASSES
+  end
+end

data/app/controllers/material_view_components/application_controller.rb

@@ -0,0 +1,4 @@
+module MaterialViewComponents
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/material_view_components/application_helper.rb

@@ -0,0 +1,4 @@
+module MaterialViewComponents
+  module ApplicationHelper
+  end
+end

data/app/javascript/application.js

@@ -0,0 +1,2 @@
+// Entry point for the build script in your package.json
+import "./controllers"

data/app/javascript/controllers/application.js

@@ -0,0 +1,15 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.warnings = true
+application.debug    = false
+window.Stimulus      = application
+
+// Register components controllers
+import registerControllersFrom from "./helpers.js"
+
+registerControllersFrom(require("../../components/**/*_controller.js"))
+
+export { application }

data/app/javascript/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello World!"
+  }
+}

data/app/javascript/controllers/helpers.js

@@ -0,0 +1,30 @@
+export const controllerNameFrom = (filename) => {
+  const pattern = /.*\/components\/((?:\w+\/)*)(\w+)_controller.js$/
+
+  const controllerName = filename
+    .replace(pattern, (_match, $1, $2) => {
+      const scope = $1
+        .replaceAll('/', '--')
+        .replaceAll('_', '-')
+
+      const name = $2
+        .replaceAll('_', '-')
+
+      return scope + name
+    })
+
+  return controllerName
+}
+
+export default registerControllersFrom = (context) => {
+  const { default: componentControllers, filenames } = context
+
+  for (let i = 0, len = componentControllers.length; i < len; i++) {
+    let componentController = componentControllers[i].default
+    let filename            = filenames[i]
+    let name                = controllerNameFrom(filename)
+
+    Stimulus.register(name, componentController)
+    console.log(name);
+  }
+}

data/app/javascript/controllers/index.js

@@ -0,0 +1,7 @@
+// This file is auto-generated by ./bin/rails stimulus:manifest:update
+// Run that command whenever you add a new controller
+
+import { application } from "./application"
+
+import HelloController from "./hello_controller"
+application.register("hello", HelloController)

data/app/jobs/material_view_components/application_job.rb

@@ -0,0 +1,4 @@
+module MaterialViewComponents
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/material_view_components/application_mailer.rb

@@ -0,0 +1,6 @@
+module MaterialViewComponents
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/material_view_components/application_record.rb

@@ -0,0 +1,5 @@
+module MaterialViewComponents
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/layouts/material_view_components/application.html.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Material view components</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag "material_view_components/application", media: "all" %>
+  <%= javascript_include_tag "application", defer: true %>
+</head>
+<body>
+
+<%= yield %>
+
+=======
+<body class="p-8">
+  <%= yield %>
+</body>
+</html>

data/config/initializers/assets.rb

@@ -0,0 +1,3 @@
+Rails.application.configure do
+  config.assets.precompile << "material_view_components_manifest.js"
+end

data/config/routes.rb

@@ -0,0 +1,2 @@
+MaterialViewComponents::Engine.routes.draw do
+end

data/lib/material_view_components/engine.rb

@@ -0,0 +1,7 @@
+require "view_component/engine"
+
+module MaterialViewComponents
+  class Engine < ::Rails::Engine
+    isolate_namespace MaterialViewComponents
+  end
+end

data/lib/material_view_components/version.rb

@@ -0,0 +1,3 @@
+module MaterialViewComponents
+  VERSION = "0.1.1"
+end

data/lib/material_view_components.rb

@@ -0,0 +1,6 @@
+require "material_view_components/version"
+require "material_view_components/engine"
+
+module MaterialViewComponents
+  # Your code goes here...
+end

data/lib/tasks/material_view_components_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :material_view_components do
+#   # Task goes here
+# end