hyraft 0.1.0.alpha1

data/templates/do_app/public/styles/css/main.css

@@ -0,0 +1,418 @@
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
+  background: #f8f9fa !important;
+  margin: 0 !important;
+  min-height: 100vh !important;
+  all: unset;
+}
+
+
+/* === Logo Styling === */
+picture {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2rem auto;
+  text-align: center;
+}
+
+
+
+
+/* Logo inside the gradient container */
+.logo {
+  display: block;
+  max-width: 200px;
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+  border-radius: 12px;
+  animation:bounce 3s infinite alternate; 
+}
+
+/* === Animation keyframes === */
+ @keyframes bounce { 0%{transform:translateY(0);} 
+                     25%{transform:translateY(-1px);}
+                     50%{transform:translateY(-5px);}
+                     75%{transform:translateY(1px);}
+                     100%{transform:translateY(0);}
+}
+
+.icon-home-feature {
+  display: block;
+  max-width: 50px;
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+  border-radius: 12px;
+  animation:bounce 3s infinite alternate; 
+ filter: invert(22%) sepia(92%) saturate(7484%) hue-rotate(358deg) brightness(100%) contrast(105%);
+}
+
+.icon-home-feature :hover {
+  background-color: #000080;
+  color: #991010;
+}
+
+.icon-home-feature img {
+ filter: invert(22%) sepia(92%) saturate(7484%) hue-rotate(358deg) brightness(100%) contrast(105%);
+  transition: filter 0.3s ease;
+}
+
+.icon-home-feature:hover img {
+  filter: invert(49%) sepia(83%) saturate(600%) hue-rotate(300deg); /* example pinkish */
+}
+.component-name {
+ display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+background: linear-gradient(135deg, #eb733c 0%, #0437F2 100%);
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}
+
+.component {
+ background: white;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 3rem;
+  border: 2px solid #e0e0e0;
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+
+  font-size: 3.5rem;
+  color: #e9475c;
+  font-weight: 600;
+  margin-bottom: 1rem;
+
+}
+
+.main-container {
+  max-width: 1000px !important;
+  margin: 0 auto !important;
+  padding: 2rem !important;
+}
+
+.main-header {
+  text-align: center !important;
+  color: #E13026 !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.main-header h1 {
+  text-align: center !important;
+  color: #E13026 !important;
+  margin-bottom: 0.5rem !important;
+  font-family:Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.home-tagline  {
+  margin-top: 20px;
+  font-size: 40px;
+  color:#000080 !important;
+  font-weight: 600 !important;
+  margin-bottom: 0.2rem !important;
+}
+
+
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: #ecf0f1;
+  padding: 0.75rem 1.5rem !important;
+  border-radius: 25px;
+  margin-bottom: 2rem;
+  font-weight: 500;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background: #27ae60;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-bottom: 4rem;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  background: #95a5a6;
+  color: white;
+  text-decoration: none;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn.primary {
+  background: #3498db;
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.main-feature  {
+  text-align: center !important;
+  color: #2c3e50 !important;
+  margin-bottom: 3rem !important;
+}
+
+.home-subtitle {
+  margin-top: 10px;
+  text-align: center;
+  color: #7f8c8d;
+  margin-bottom: 3rem !important;
+}
+
+
+.home-feature-grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 2rem;
+}
+
+.home-feature {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  text-align: center;
+}
+
+.home-feature-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.home-feature h3 {
+  font-size: 17px !important;
+  font-weight: bold !important;
+  color: #000080 !important;
+  margin-bottom: 1rem !important;
+  all: unset;
+}
+
+.home-feature p {
+  margin-top: 5px !important;
+  color: #7f8c8d !important;
+  line-height: 1.5 !important;
+}
+
+.demo {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.demo h3 {
+  color: #2c3e50;
+  margin-bottom: 0.5rem;
+}
+
+.demo p {
+  color: #7f8c8d;
+  margin-bottom: 1rem;
+}
+
+
+/* Footer Styles */
+.site-footer {
+background: linear-gradient(135deg, #E13026 0%, #000080 100%);
+  color: #fff;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-info h5, .footer-links h5 {
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+
+.footer-links .social-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.social-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #ffffff;
+  text-decoration: none;
+  padding: 6px 12px;
+  border-radius: 5px;
+
+  transition: background 0.2s ease;
+}
+
+.social-btn:hover {
+  background-color: #000080;
+  color: #ffffff;
+}
+
+.social-btn img {
+  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg);
+  transition: filter 0.3s ease;
+}
+
+.social-btn:hover img {
+  filter: invert(49%) sepia(83%) saturate(600%) hue-rotate(300deg); /* example pinkish */
+}
+
+.icon-footer {
+  width: 20px;
+  height: 20px;
+}
+
+.footer-meta {
+  margin-top: 30px;
+  font-size: 14px;
+  color: #aaa;
+}
+
+@media (max-width: 768px) {
+  .logo {
+    max-width: 250px;
+  }
+  .main-container {
+    padding: 1rem;
+  }
+  
+  .main-header h1 {
+    font-size: 2.5rem;
+  }
+  
+  .actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .btn {
+    width: 200px;
+  }
+  
+  .home-feature-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+
+
+/* Card Styles */
+.counter-card{
+  background: #f8f9fa;
+  border: 2px solid #e9ecef;
+  border-radius: 15px;
+  padding: 25px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.counter-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+}
+
+.counter-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+  border-color: #667eea;
+}
+
+.counter-card h3{
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #000080;
+  font-size: 1.3rem;
+  border-bottom: 2px solid #e9ecef;
+  padding-bottom: 10px;
+}
+
+/* Counter Styles */
+.counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.counter-btn {
+  padding: 12px 20px;
+  background: linear-gradient(135deg, #667eea,  #000080);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  font-size: 1.5rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.counter-btn:hover {
+  transform: scale(1.1);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.count-display {
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: #2c3e50;
+  min-width: 80px;
+  text-align: center;
+  padding: 10px 20px;
+
+}
+
+
+.status-text {
+  display: block;
+  font-size: 1.1rem;
+  color: #000000;
+  margin-bottom: 15px;
+  padding: 10px;
+}

data/templates/do_app/public/styles/css/spa.css

@@ -0,0 +1,171 @@
+.app {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.app-header {
+  border-bottom: 2px solid #333;
+  padding-bottom: 20px;
+  margin-bottom: 30px;
+}
+
+.app-nav {
+  display: flex;
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.nav-btn, .back-btn, .action-btn, .submit-btn, .error-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.nav-btn, .submit-btn {
+  background: #007bff;
+  color: white;
+}
+
+.back-btn {
+  background: #6c757d;
+  color: white;
+}
+
+.action-btn {
+  background: #28a745;
+  color: white;
+  margin: 2px;
+}
+
+.edit-btn {
+  background: #ffc107;
+  color: black;
+}
+
+.delete-btn {
+  background: #dc3545;
+  color: white;
+}
+
+.error-btn {
+  background: #dc3545;
+  color: white;
+  margin-left: 10px;
+}
+
+.articles-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.article-item {
+  border: 1px solid #ddd;
+  padding: 20px;
+  border-radius: 8px;
+  background: #f9f9f9;
+}
+
+.article-title {
+  margin: 0 0 10px 0;
+  color: #333;
+}
+
+.article-content-preview {
+  margin: 0 0 15px 0;
+  color: #666;
+}
+
+.article-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.article-detail {
+  background: white;
+  padding: 30px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.article-detail-title {
+  margin: 0 0 20px 0;
+  color: #333;
+  border-bottom: 2px solid #007bff;
+  padding-bottom: 10px;
+}
+
+.article-detail-content {
+  line-height: 1.6;
+  color: #555;
+  white-space: pre-wrap;
+}
+
+.article-form {
+  background: white;
+  padding: 30px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: #333;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: #666;
+}
+
+.error {
+  background: #f8d7da;
+  color: #721c24;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: between;
+  align-items: center;
+}
+
+.no-articles {
+  text-align: center;
+  color: #666;
+  font-style: italic;
+  padding: 40px;
+}
+
+.app-footer {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #ddd;
+  text-align: center;
+  color: #666;
+}

data/templates/do_app/shared/helpers/pagination_helper.rb

@@ -0,0 +1,44 @@
+module PaginationHelper
+  DEFAULT_PER_PAGE = 10
+  MAX_PER_PAGE = 100
+  MIN_PER_PAGE = 1
+
+  def self.extract_params(request, defaults: {})
+    defaults = { page: 1, per_page: DEFAULT_PER_PAGE }.merge(defaults)
+    query_string = request.env['QUERY_STRING'] || ''
+    
+    page = (query_string.match(/[?&]page=(\d+)/) ? $1.to_i : nil) || 
+           request.params['page']&.to_i || defaults[:page]
+    
+    per_page = (query_string.match(/[?&]per_page=(\d+)/) ? $1.to_i : nil) || 
+               request.params['per_page']&.to_i || defaults[:per_page]
+    
+    page = [page, 1].max
+    per_page = [[per_page, MIN_PER_PAGE].max, MAX_PER_PAGE].min
+    
+    { page: page, per_page: per_page }
+  end
+
+  def self.paginate(collection, page:, per_page:)
+    total_items = collection.size
+    total_pages = [(total_items.to_f / per_page).ceil, 1].max
+    page = [page, total_pages].min
+    
+    start_index = (page - 1) * per_page
+    paginated_items = collection[start_index, per_page] || []
+    
+    {
+      items: paginated_items,
+      pagination: {
+        current_page: page,
+        per_page: per_page,
+        total_items: total_items,
+        total_pages: total_pages,
+        has_previous: page > 1,
+        has_next: page < total_pages,
+        previous_page: page > 1 ? page - 1 : nil,
+        next_page: page < total_pages ? page + 1 : nil
+      }
+    }
+  end
+end

data/templates/do_app/shared/helpers/response_formatter.rb

@@ -0,0 +1,25 @@
+# shared/helpers/response_formatter.rb
+require 'json'
+
+class ResponseFormatter
+  def self.json(data, status: 200)
+    # Convert data to JSON-serializable format
+    json_data = if data.is_a?(Array)
+                  data.map { |item| item.respond_to?(:to_h) ? item.to_h : item }
+                elsif data.respond_to?(:to_h)
+                  data.to_h
+                else
+                  data
+                end
+    
+    [status, 
+     {'Content-Type' => 'application/json'}, 
+     [json_data.to_json]]
+  end
+
+  def self.html(content, status: 200)
+    [status,
+     {'Content-Type' => 'text/html; charset=utf-8'}, 
+     [content]]
+  end
+end

data/templates/do_app/test/acceptance/api/articles_api_acceptance_test.rb

@@ -0,0 +1,43 @@
+# test/acceptance/api/articles_api_acceptance_test.rb
+require_relative "../../test_helper"
+
+class ArticlesApiAcceptanceTest < Minitest::Test
+  include Rack::Test::Methods
+
+  def app
+    # This should point to your actual API server
+    # You might need to create this based on your infra/server setup
+    ->(env) { 
+      # Simple mock API for acceptance testing
+      case env['PATH_INFO']
+      when '/api/articles'
+        [200, { 'Content-Type' => 'application/json' }, ['[{"id":"1","title":"Test"}]']]
+      when '/api/articles/1'
+        [200, { 'Content-Type' => 'application/json' }, ['{"id":"1","title":"Test"}']]
+      else
+        [404, {}, ['Not Found']]
+      end
+    }
+  end
+
+  def test_api_articles_endpoint
+    get '/api/articles'
+    
+    assert_equal 200, last_response.status
+    assert_equal 'application/json', last_response.content_type
+    
+    response = JSON.parse(last_response.body)
+    assert response.is_a?(Array)
+  end
+
+  def test_api_single_article_endpoint
+    get '/api/articles/1'
+    
+    assert_equal 200, last_response.status
+    assert_equal 'application/json', last_response.content_type
+    
+    response = JSON.parse(last_response.body)
+    assert response["id"]
+    assert response["title"]
+  end
+end

data/templates/do_app/test/acceptance/web/articles_acceptance_test.rb

@@ -0,0 +1,31 @@
+require_relative "../../test_helper"
+
+class ArticlesWebAcceptanceTest < Minitest::Test
+  include Rack::Test::Methods
+
+  def app
+    ->(env) { 
+      [200, {'Content-Type' => 'text/html'}, ['Test response']] 
+    }
+  end
+
+  def test_visit_articles_index
+    get '/articles'
+    assert_equal 200, last_response.status
+  end
+
+  def test_visit_article_show
+    get '/articles/1'
+    assert_equal 200, last_response.status
+  end
+
+  def test_visit_new_article_page
+    get '/articles/new'
+    assert_equal 200, last_response.status
+  end
+
+  def test_visit_edit_article_page
+    get '/articles/1/edit'
+    assert_equal 200, last_response.status
+  end
+end