aeros 0.0.1 → 0.0.2

data/app/components/aeros/primitives/sidebar/component.html.erb

@@ -0,0 +1,25 @@
+<div class="cp-sidebar">
+  <% if header? %>
+    <div class="cp-sidebar__header"><%= header %></div>
+  <% end %>
+
+  <% if items.any? || groups.any? %>
+    <nav class="cp-sidebar__nav">
+      <% if items.any? %>
+        <ul class="cp-sidebar__menu">
+          <% items.each do |item| %>
+            <li><%= item %></li>
+          <% end %>
+        </ul>
+      <% end %>
+
+      <% groups.each do |group| %>
+        <%= group %>
+      <% end %>
+    </nav>
+  <% end %>
+
+  <% if footer? %>
+    <div class="cp-sidebar__footer"><%= footer %></div>
+  <% end %>
+</div>

data/app/components/aeros/primitives/sidebar/component.rb

@@ -0,0 +1,14 @@
+module Aeros::Primitives::Sidebar
+  class Component < Aeros::ApplicationViewComponent
+    renders_many(:items, Aeros::Primitives::Sidebar::Item)
+    renders_many(:groups, Aeros::Primitives::Sidebar::Group)
+    renders_one(:header, Aeros::Primitives::Sidebar::Header)
+    renders_one(:footer, Aeros::Primitives::Sidebar::Footer)
+
+    examples("Sidebar", description: "Navigation sidebar with groups and items") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview
+      end
+    end
+  end
+end

data/app/components/aeros/primitives/sidebar/footer.rb

@@ -0,0 +1,7 @@
+module Aeros::Primitives::Sidebar
+  class Footer < Aeros::ApplicationViewComponent
+    erb_template <<~ERB
+      <div><%= content %></div>
+    ERB
+  end
+end

data/app/components/aeros/primitives/sidebar/group.rb

@@ -0,0 +1,18 @@
+module Aeros::Primitives::Sidebar
+  class Group < Aeros::ApplicationViewComponent
+    option :label
+
+    renders_many :items, Item
+
+    erb_template <<~ERB
+      <div class="cp-sidebar__group">
+        <div class="cp-sidebar__group-label"><%= label %></div>
+        <ul class="cp-sidebar__group-menu">
+          <% items.each do |item| %>
+            <li><%= item %></li>
+          <% end %>
+        </ul>
+      </div>
+    ERB
+  end
+end

data/app/components/aeros/primitives/sidebar/header.rb

@@ -0,0 +1,7 @@
+module Aeros::Primitives::Sidebar
+  class Header < Aeros::ApplicationViewComponent
+    erb_template <<~ERB
+      <div><%= content %></div>
+    ERB
+  end
+end

data/app/components/aeros/primitives/sidebar/item.rb

@@ -0,0 +1,19 @@
+module Aeros::Primitives::Sidebar
+  class Item < Aeros::ApplicationViewComponent
+    option :label
+    option :href
+    option :icon, optional: true
+    option :active, default: proc { false }
+
+    def item_classes
+      ["cp-sidebar__item", active ? "cp-sidebar__item--active" : nil, css].compact.join(" ")
+    end
+
+    erb_template <<~ERB
+      <%= link_to(href, class: item_classes) do %>
+        <%= lucide_icon(icon) if icon %>
+        <span><%= label %></span>
+      <% end %>
+    ERB
+  end
+end

data/app/components/aeros/primitives/sidebar/styles.css

@@ -0,0 +1,95 @@
+/* Sidebar component styles */
+.cp-sidebar {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--ui-sidebar-bg, #fafafa);
+  color: var(--ui-sidebar-fg, #1a1a1a);
+  border-right: 1px solid var(--ui-sidebar-border, #e5e5e5);
+
+  &__header {
+    flex-shrink: 0;
+  }
+
+  &__nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 0.5rem;
+  }
+
+  &__footer {
+    flex-shrink: 0;
+    padding: 1rem;
+    border-top: 1px solid var(--ui-sidebar-border, #e5e5e5);
+    font-size: 0.75rem;
+    color: var(--ui-muted-color, #737373);
+  }
+
+  &__menu {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__group {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    padding: 0.25rem 0;
+  }
+
+  &__group-label {
+    color: var(--ui-muted-color, #737373);
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__group-menu {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: var(--ui-input-radius, 0.375rem);
+    padding: 0.5rem;
+    text-align: left;
+    font-size: 0.875rem;
+    color: var(--ui-sidebar-fg, #1a1a1a);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background-color: var(--ui-sidebar-hover, #f0f0f0);
+    }
+
+    & svg {
+      width: 1rem;
+      height: 1rem;
+      flex-shrink: 0;
+    }
+
+    &--active {
+      background-color: var(--ui-sidebar-active, #e5e5e5);
+      font-weight: 500;
+    }
+  }
+}

data/app/components/aeros/primitives/spinner/component.rb

@@ -0,0 +1,36 @@
+module Aeros::Primitives::Spinner
+  class Component < ::Aeros::ApplicationViewComponent
+    prop :size, description: "Spinner size", values: [:sm, :default, :lg], default: -> { :default }
+    prop :variant, description: "Spinner color variant", values: [:default, :white], default: -> { :default }
+
+    examples("Spinner", description: "Loading indicator") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview
+      end
+
+      b.example(:sizes, title: "Sizes") do |e|
+        e.preview size: :sm
+        e.preview size: :default
+        e.preview size: :lg
+      end
+
+      b.example(:variants, title: "Variants") do |e|
+        e.preview variant: :default
+        e.preview variant: :white
+      end
+    end
+
+    def classes
+      [
+        class_for("base"),
+        class_for(size.to_s),
+        class_for(variant.to_s),
+        css
+      ].compact.join(" ")
+    end
+
+    erb_template <<~ERB
+      <span class="<%= classes %>"></span>
+    ERB
+  end
+end

data/app/components/aeros/primitives/spinner/styles.css

@@ -0,0 +1,81 @@
+/* Spinner component styles */
+.cp-spinner {
+  position: relative;
+  inset: 0;
+  padding-left: 0.5rem;
+  margin-right: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+
+  &::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: -0.625rem;
+    margin-left: -0.625rem;
+    border-radius: 9999px;
+    border-width: 2px;
+    border-style: solid;
+    animation: spin 1s linear infinite;
+  }
+
+  /* Sizes */
+  &--xs::before {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-top: -0.375rem;
+    margin-left: -0.375rem;
+  }
+
+  &--sm::before {
+    width: 1rem;
+    height: 1rem;
+    margin-top: -0.5rem;
+    margin-left: -0.5rem;
+  }
+
+  &--lg::before {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: -0.75rem;
+    margin-left: -0.75rem;
+  }
+
+  &--xl::before {
+    width: 2rem;
+    height: 2rem;
+    margin-top: -1rem;
+    margin-left: -1rem;
+  }
+
+  /* Variants */
+  &--white::before {
+    border-color: rgb(255 255 255 / 0.5);
+    border-top-color: white;
+  }
+
+  &--default::before {
+    border-color: rgb(107 114 128 / 0.5);
+    border-top-color: rgb(107 114 128);
+  }
+
+  &--primary::before {
+    border-color: rgb(from var(--ui-button-bg, #475569) r g b / 0.5);
+    border-top-color: var(--ui-button-bg, #475569);
+  }
+
+  &--black::before {
+    border-color: rgb(0 0 0 / 0.5);
+    border-top-color: black;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

data/app/components/aeros/primitives/table/cell.rb

@@ -0,0 +1,7 @@
+module Aeros::Primitives::Table
+  class Cell < Aeros::ApplicationViewComponent
+    erb_template <<~ERB
+      <td class="cp-table__td <%= css %>"><%= content %></td>
+    ERB
+  end
+end

data/app/components/aeros/primitives/table/column.rb

@@ -0,0 +1,7 @@
+module Aeros::Primitives::Table
+  class Column < Aeros::ApplicationViewComponent
+    erb_template <<~ERB
+      <th scope="col" class="cp-table__th <%= css %>"><%= content %></th>
+    ERB
+  end
+end

data/app/components/aeros/primitives/table/component.html.erb

@@ -0,0 +1,8 @@
+<div class="cp-table">
+  <table<%= " id=\"#{id}\"" if id %>>
+    <%= header if header? %>
+    <tbody>
+      <% rows.each do |row| %><%= row %><% end %>
+    </tbody>
+  </table>
+</div>

data/app/components/aeros/primitives/table/component.rb

@@ -0,0 +1,14 @@
+module Aeros::Primitives::Table
+  class Component < ::Aeros::ApplicationViewComponent
+    prop :id, description: "HTML id attribute", optional: true
+
+    renders_one :header, Aeros::Primitives::Table::Header
+    renders_many :rows, Aeros::Primitives::Table::Row
+
+    examples("Table", description: "Data table with header and rows") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview
+      end
+    end
+  end
+end

data/app/components/aeros/primitives/table/header.rb

@@ -0,0 +1,13 @@
+module Aeros::Primitives::Table
+  class Header < Aeros::ApplicationViewComponent
+    renders_many :columns, Aeros::Primitives::Table::Column
+
+    erb_template <<~ERB
+      <thead class="cp-table__head">
+        <tr>
+          <% columns.each do |column| %><%= column %><% end %>
+        </tr>
+      </thead>
+    ERB
+  end
+end

data/app/components/aeros/primitives/table/row.rb

@@ -0,0 +1,11 @@
+module Aeros::Primitives::Table
+  class Row < Aeros::ApplicationViewComponent
+    renders_many :cells, Aeros::Primitives::Table::Cell
+
+    erb_template <<~ERB
+      <tr class="cp-table__tr <%= css %>">
+        <% cells.each do |cell| %><%= cell %><% end %>
+      </tr>
+    ERB
+  end
+end

data/app/components/aeros/primitives/table/styles.css

@@ -0,0 +1,39 @@
+.cp-table {
+  overflow-x: auto;
+
+  & table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  &__head {
+    background-color: var(--ui-area-bg);
+  }
+
+  &__th {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--ui-muted-color);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__tr {
+    border-bottom: 1px solid var(--ui-card-border);
+  }
+
+  &__td {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    color: var(--ui-foreground);
+
+    & code {
+      background: var(--ui-area-bg);
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      font-size: 0.8125rem;
+    }
+  }
+}

data/app/controllers/aeros/application_controller.rb

@@ -1,4 +1,15 @@
 module Aeros
   class ApplicationController < ActionController::Base
+    include Aeros::ApplicationHelper
+
+    helper_method :current_theme, :current_mode
+
+    def current_theme
+      session[:theme] || "slate"
+    end
+
+    def current_mode
+      session[:mode] || "light"
+    end
   end
 end

data/app/controllers/aeros/showcase_controller.rb

@@ -1,4 +1,40 @@
 module Aeros
   class ShowcaseController < ApplicationController
+    helper_method :primitives, :blocks
+
+    def index
+      page("showcase/index")
+    end
+
+    def show
+      component_class = resolve_component(params[:namespace], params[:id])
+      if component_class
+        page("showcase/show", component_class: component_class)
+      else
+        page("showcase/placeholder", namespace: params[:namespace], id: params[:id])
+      end
+    end
+
+    private
+
+    def resolve_component(namespace, id)
+      ns = namespace.to_s.camelize
+      name = id.to_s.camelize
+      "Aeros::#{ns}::#{name}::Component".constantize
+    rescue NameError, NoMethodError
+      nil
+    end
+
+    def components_path
+      Aeros::Engine.root.join("app/components/aeros")
+    end
+
+    def primitives
+      @primitives ||= Dir.glob(components_path.join("primitives/*/")).map { |p| File.basename(p) }.sort
+    end
+
+    def blocks
+      @blocks ||= Dir.glob(components_path.join("blocks/*/")).map { |p| File.basename(p) }.sort
+    end
   end
-end
+end

data/app/controllers/aeros/theme_controller.rb

@@ -0,0 +1,10 @@
+module Aeros
+  class ThemeController < ApplicationController
+    def update
+      session[:theme] = params[:theme] if %w[slate zinc].include?(params[:theme])
+      session[:mode] = params[:mode] if %w[light dark].include?(params[:mode])
+
+      redirect_back(fallback_location: root_path, status: :see_other)
+    end
+  end
+end

data/app/helpers/aeros/application_helper.rb

@@ -1,16 +1,28 @@
 module Aeros
   module ApplicationHelper
-    def sqema_importmap_tags(entry_point = "application", shim: true)
-      safe_join [
-        javascript_inline_importmap_tag(Aeros.importmap.to_json(resolver: self)),
-        javascript_importmap_module_preload_tags(Aeros.importmap),
-        javascript_import_module_tag(entry_point)
-      ].compact, "\n"
+    def page(name, *args, **kwargs, &block)
+      component = "Aeros::Pages::#{name.split("/").map(&:camelize).join("::")}::Component".constantize
+      render(component.new(*args, **kwargs), &block)
     end
 
     def ui(name, *args, **kwargs, &block)
-      component = "Aeros::#{name.to_s.camelize}::Component".constantize
+      class_name = name.to_s.tr("-", "_").camelize
+      component = "Aeros::Primitives::#{class_name}::Component".constantize
       render(component.new(*args, **kwargs), &block)
     end
+
+    def block(name, *args, **kwargs, &blk)
+      class_name = name.to_s.tr("-", "_").camelize
+      component = "Aeros::Blocks::#{class_name}::Component".constantize
+      render(component.new(*args, **kwargs), &blk)
+    end
+
+    # Output theme configuration as inline CSS in the aeros-config layer
+    def aeros_theme_tag
+      css = Aeros.configuration.theme_css
+      return "".html_safe if css.empty?
+
+      "<style>#{css}</style>".html_safe
+    end
   end
 end

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

@@ -1,20 +1,55 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <title>Aeros</title>
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
+<html data-theme="<%= current_theme %>" data-mode="<%= current_mode %>">
+  <head>
+    <title>Aeros</title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= yield :head %>
+    <%= stylesheet_link_tag "aeros/application", media: "all" %>
+    <%= javascript_importmap_tags "aeros/application", importmap: Aeros.importmap %>
+  </head>
+  <body>
+    <%= ui("layouts/app") do |layout| %>
+      <% layout.with_sidebar(style: { width: "240px" }) do %>
+        <%= ui("sidebar") do |s| %>
+          <% s.with_header do %>
+            <a href="#" class="cp-layout-app__logo">Aeros</a>
+          <% end %>
 
-  <%= yield :head %>
+          <% s.with_group(label: "Primitives") do |g| %>
+            <% primitives.each do |name| %>
+              <% g.with_item(label: name.titleize, href: showcase_component_path("primitives", name)) %>
+            <% end %>
+          <% end %>
 
-  <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>
-  <%= stylesheet_link_tag "aeros/application", media: "all" %>
-  <%= stylesheet_link_tag "aeros/tailwind", media: "all" %>
-  <%= javascript_importmap_tags "aeros/application", importmap: Aeros.importmap %>
-</head>
-<body>
+          <% s.with_group(label: "Blocks") do |g| %>
+            <% blocks.each do |name| %>
+              <% g.with_item(label: name.titleize, href: showcase_component_path("blocks", name)) %>
+            <% end %>
+          <% end %>
 
-<%= yield %>
+          <% s.with_footer do %>
+            <span>v0.1.0</span>
+          <% end %>
+        <% end %>
+      <% end %>
 
-</body>
+      <%= yield %>
+    <% end %>
+
+    <div class="cg-theme-toggle">
+      <%= ui("dropdown", placement: :top, strategy: :fixed) do |d| %>
+        <% d.with_trigger do %>
+          <%= ui("button", icon: "palette", label: "#{current_theme.titleize} (#{current_mode.titleize})", variant: :outline, css: "text-xs") %>
+        <% end %>
+        <% d.with_label do %>Palette<% end %>
+        <% d.with_item(href: theme_path(theme: "slate", mode: current_mode), method: :patch, form_data: { turbo: false }) do %>Slate<% end %>
+        <% d.with_item(href: theme_path(theme: "zinc", mode: current_mode), method: :patch, form_data: { turbo: false }) do %>Zinc<% end %>
+        <% d.with_separator %>
+        <% d.with_label do %>Mode<% end %>
+        <% d.with_item(href: theme_path(theme: current_theme, mode: "light"), method: :patch, form_data: { turbo: false }) do %>Light<% end %>
+        <% d.with_item(href: theme_path(theme: current_theme, mode: "dark"), method: :patch, form_data: { turbo: false }) do %>Dark<% end %>
+      <% end %>
+    </div>
+  </body>
 </html>

data/config/importmap.rb

@@ -3,6 +3,11 @@ pin "aeros/application"
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 
+# Floating UI
+pin "@floating-ui/core", to: "https://cdn.jsdelivr.net/npm/@floating-ui/core@1.6.9/+esm"
+pin "@floating-ui/utils", to: "https://cdn.jsdelivr.net/npm/@floating-ui/utils@0.2.9/+esm"
+pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.13/+esm"
+
 pin_all_from(
   Aeros::Engine.root.join("app/javascript/aeros/controllers"),
   under: "aeros/controllers",
@@ -12,4 +17,4 @@ pin_all_from(
   Aeros::Engine.root.join("app/components/aeros"),
   under: "aeros/components",
   to: "aeros"
-)
+)

data/config/routes.rb

@@ -1,3 +1,5 @@
 Aeros::Engine.routes.draw do
+  get("/showcase/:namespace/:id", to: "showcase#show", as: :showcase_component)
+  patch("/theme", to: "theme#update", as: :theme)
   root(to: "showcase#index")
 end

data/lib/aeros/configuration.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Aeros
+  class Configuration
+    attr_reader :theme_overrides
+
+    def initialize
+      @theme_overrides = {}
+    end
+
+    def theme
+      yield ThemeBuilder.new(@theme_overrides) if block_given?
+    end
+
+    # Generate CSS for the aeros-config layer
+    def theme_css
+      return "" if @theme_overrides.empty?
+
+      vars = @theme_overrides.map { |k, v| "#{k}:#{v}" }.join(";")
+      "@layer aeros-config{:root{#{vars}}}"
+    end
+
+    class ThemeBuilder
+      def initialize(overrides)
+        @overrides = overrides
+      end
+
+      # Allow setting any --ui-* variable
+      def method_missing(name, value = nil)
+        if value
+          # Remove trailing = from setter method name
+          var_name = "--ui-#{name.to_s.chomp('=').tr('_', '-')}"
+          @overrides[var_name] = value
+        end
+      end
+
+      def respond_to_missing?(name, include_private = false)
+        true
+      end
+    end
+  end
+
+  class << self
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield(configuration)
+    end
+
+    def reset_configuration!
+      @configuration = Configuration.new
+    end
+  end
+end