glib-web 4.39.1 → 4.39.2

data/app/views/glib/api_docs/component.json.jbuilder

@@ -0,0 +1,215 @@
+json.title @component['class_name']
+
+page = json_ui_page json
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  # Back button
+  scroll.button \
+    text: "← Back to #{@category.titleize}",
+    styleClasses: ['btn-outline-secondary', 'btn-sm'],
+    onClick: ->(action) do
+      action.windows_open url: json_ui_api_url(category: @category)
+    end
+
+  scroll.spacer height: 16
+
+  # Title
+  scroll.panels_horizontal align: 'middle', childViews: ->(title_row) do
+    title_row.h1 text: @component['class_name']
+
+    if @component['extends']
+      title_row.spacer width: 12
+      title_row.h5 text: "extends #{@component['extends']}", styleClass: 'text-muted'
+    end
+  end
+
+  # Deprecated warning
+  if @component['deprecated']
+    scroll.spacer height: 16
+    scroll.panels_vertical \
+      padding: { all: 16 },
+      backgroundColor: '#fff3cd',
+      styleClasses: ['rounded'],
+      childViews: ->(warning) do
+        warning.h5 text: '⚠️ Deprecated', color: '#856404'
+        deprecation_text = @component['deprecated'] == true ? 'This component is deprecated and should not be used in new code.' : @component['deprecated']
+        warning.p text: deprecation_text, color: '#856404'
+      end
+  end
+
+  scroll.spacer height: 24
+
+  # Description
+  if @component['description']
+    scroll.h3 text: 'Description'
+    @component['description'].split("\n\n").each do |paragraph|
+      scroll.p text: paragraph.strip, styleClass: 'lead'
+    end
+    scroll.spacer height: 32
+  end
+
+  # Properties
+  if @component['properties'] && @component['properties'].any?
+    scroll.h2 text: 'Properties'
+    scroll.spacer height: 16
+
+    @component['properties'].each do |prop_name, prop|
+      scroll.panels_vertical \
+        padding: { all: 16 },
+        styleClasses: ['card', 'rounded'],
+        childViews: ->(prop_card) do
+          # Property name and badges
+          prop_card.panels_horizontal align: 'middle', childViews: ->(header) do
+            header.h5 text: prop_name, styleClass: 'font-monospace'
+            header.spacer width: 8
+
+            # Type badge
+            type_color = case prop['type']
+                         when 'string', 'text' then '#0d6efd'
+                         when 'int', 'float' then '#198754'
+                         when 'bool' then '#0dcaf0'
+                         when 'action' then '#ffc107'
+                         when 'views', 'panels_builder' then '#6c757d'
+                         when 'hash', 'array' then '#212529'
+                         else '#f8f9fa'
+                         end
+
+            header.label text: prop['type'], backgroundColor: type_color, styleClasses: ['badge'], color: '#ffffff'
+
+            if prop['required']
+              header.spacer width: 4
+              header.label text: 'required', backgroundColor: '#dc3545', styleClasses: ['badge'], color: '#ffffff'
+            end
+
+            if prop['deprecated']
+              header.spacer width: 4
+              header.label text: 'deprecated', backgroundColor: '#ffc107', styleClasses: ['badge']
+            end
+          end
+
+          # Description
+          if prop['description']
+            prop_card.spacer height: 8
+            prop['description'].split("\n").each do |line|
+              prop_card.p text: line.strip
+            end
+          end
+
+          # Hash options
+          if prop['options'] && prop['options']['optional']
+            prop_card.spacer height: 8
+            prop_card.label text: 'Optional hash keys:', styleClass: 'text-muted'
+            prop_card.label text: prop['options']['optional'].join(', '), styleClass: 'font-monospace'
+          end
+
+          # Examples
+          if prop['examples'] && prop['examples'].any?
+            prop_card.spacer height: 8
+            prop_card.label text: 'Example:', styleClasses: ['text-muted', 'font-weight-bold']
+            prop['examples'].each do |example|
+              prop_card.panels_vertical \
+                padding: { all: 12 },
+                backgroundColor: '#f6f8fa',
+                styleClasses: ['rounded'],
+                childViews: ->(code_block) do
+                  code_block.label text: example, styleClass: 'font-monospace'
+                end
+            end
+          end
+
+          # Notes
+          if prop['notes'] && prop['notes'].any?
+            prop_card.spacer height: 8
+            prop_card.panels_vertical \
+              padding: { all: 12 },
+              backgroundColor: '#cfe2ff',
+              styleClasses: ['rounded'],
+              childViews: ->(note_block) do
+                note_block.label text: 'Note:', styleClasses: ['font-weight-bold'], color: '#084298'
+                prop['notes'].each do |note|
+                  note_block.label text: note, color: '#084298'
+                end
+              end
+          end
+
+          # Deprecation
+          if prop['deprecated']
+            prop_card.spacer height: 8
+            prop_card.panels_vertical \
+              padding: { all: 12 },
+              backgroundColor: '#fff3cd',
+              styleClasses: ['rounded'],
+              childViews: ->(dep_block) do
+                dep_block.label text: 'Deprecated:', styleClasses: ['font-weight-bold'], color: '#856404'
+                dep_block.label text: prop['deprecated'], color: '#856404'
+              end
+          end
+        end
+
+      scroll.spacer height: 12
+    end
+
+    scroll.spacer height: 32
+  end
+
+  # Examples
+  if @component['examples'] && @component['examples'].any?
+    scroll.h2 text: 'Examples'
+    scroll.spacer height: 16
+
+    @component['examples'].each_with_index do |example, index|
+      scroll.panels_vertical \
+        styleClasses: ['card'],
+        childViews: ->(example_card) do
+          # Header
+          example_card.panels_vertical \
+            padding: { all: 12 },
+            backgroundColor: '#f8f9fa',
+            childViews: ->(header) do
+              header.h5 text: example['label'] || "Example #{index + 1}"
+            end
+
+          # Code
+          example_card.panels_vertical \
+            padding: { all: 16 },
+            backgroundColor: '#f6f8fa',
+            childViews: ->(code_block) do
+              example['code'].split("\n").each do |line|
+                code_block.label text: line, styleClass: 'font-monospace'
+              end
+            end
+        end
+
+      scroll.spacer height: 12
+    end
+
+    scroll.spacer height: 32
+  end
+
+  # References
+  if @component['references'] && @component['references'].any?
+    scroll.h2 text: 'References'
+    scroll.spacer height: 16
+
+    scroll.panels_vertical styleClasses: ['card'], childViews: ->(refs) do
+      @component['references'].each do |ref|
+        refs.panels_vertical padding: { all: 12 }, childViews: ->(ref_item) do
+          if ref['url']
+            ref_item.button \
+              text: ref['url'],
+              styleClasses: ['btn-link', 'text-start'],
+              onClick: ->(action) do
+                action.windows_open url: ref['url']
+              end
+
+            if ref['description']
+              ref_item.label text: ref['description'], styleClasses: ['text-muted', 'text-small']
+            end
+          else
+            ref_item.label text: ref['text'], styleClass: 'font-monospace'
+          end
+        end
+      end
+    end
+  end
+end

data/app/views/glib/api_docs/index.json.jbuilder

@@ -0,0 +1,103 @@
+json.title 'Glib Component API Documentation'
+
+page = json_ui_page json
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  # Header
+  scroll.panels_vertical \
+    padding: { top: 32, bottom: 32 },
+    backgroundColor: '#667eea',
+    align: 'center',
+    childViews: ->(header) do
+      header.h1 text: 'Glib Component API', color: '#ffffff'
+      header.p text: 'Interactive documentation for all Glib UI components', color: '#ffffff'
+      header.label text: 'Auto-generated from YARD comments in source code', color: '#e0e0e0', styleClass: 'text-small'
+    end
+
+  scroll.spacer height: 32
+
+  # Title
+  scroll.h2 text: 'Component Categories'
+  scroll.p text: 'Browse components by category', styleClass: 'text-muted'
+
+  scroll.spacer height: 16
+
+  if @categories.empty?
+    # Warning message
+    scroll.panels_vertical \
+      padding: { all: 16 },
+      backgroundColor: '#fff3cd',
+      styleClasses: ['rounded'],
+      childViews: ->(warning) do
+        warning.h4 text: 'No Documentation Found', color: '#856404'
+        warning.p text: 'Component documentation has not been generated yet.'
+        warning.p text: 'Run bin/generate_component_docs to generate documentation.', styleClass: 'code'
+      end
+  else
+    # Categories grid
+    scroll.panels_responsive width: 'matchParent', childViews: ->(responsive) do
+      @categories.each do |category|
+        responsive.panels_column \
+          lg: { cols: 4 },
+          md: { cols: 6 },
+          xs: { cols: 12 },
+          childViews: ->(col) do
+            col.panels_vertical \
+              padding: { all: 16 },
+              styleClasses: ['card', 'rounded'],
+              onClick: ->(action) do
+                action.windows_open url: json_ui_api_url(category: category['key'])
+              end,
+              childViews: ->(card) do
+                # Title with badge
+                card.panels_horizontal \
+                  align: 'middle',
+                  childViews: ->(title_row) do
+                    title_row.h5 text: category['name']
+                    title_row.spacer width: 8
+                    title_row.label \
+                      text: "#{category['component_count']} components",
+                      styleClasses: ['badge', 'bg-primary']
+                  end
+
+                card.spacer height: 8
+
+                # Source file
+                if category['source_file']
+                  card.label \
+                    text: File.basename(category['source_file']),
+                    styleClasses: ['text-muted', 'text-small', 'font-monospace']
+                end
+
+                card.spacer height: 12
+
+                # Button
+                card.button \
+                  text: 'View Components →',
+                  styleClasses: ['btn-outline-primary', 'btn-sm']
+              end
+          end
+      end
+    end
+  end
+
+  scroll.spacer height: 48
+
+  # About section
+  scroll.h3 text: 'About This Documentation'
+  scroll.panels_vertical styleClasses: ['card'], padding: { all: 16 }, childViews: ->(about) do
+    about.p text: 'This documentation is automatically generated from YARD comments in the Glib source code. Each component includes:'
+
+    about.panels_ul childViews: ->(ul) do
+      ul.label text: 'Description - What the component does and when to use it'
+      ul.label text: 'Properties - All available properties with types and descriptions'
+      ul.label text: 'Examples - Real code examples showing how to use the component'
+      ul.label text: 'References - Links to external documentation and garage examples'
+    end
+
+    about.spacer height: 8
+    about.label \
+      text: 'For more information, see doc/components/README.md and doc/common/component_documentation_guidelines.md',
+      styleClasses: ['text-muted', 'text-small']
+  end
+end

data/app/views/glib/api_docs/show.json.jbuilder

@@ -0,0 +1,111 @@
+json.title "#{@category.titleize} Components"
+
+page = json_ui_page json
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  # Back button
+  scroll.button \
+    text: '← Back to Categories',
+    styleClasses: ['btn-outline-secondary', 'btn-sm'],
+    onClick: ->(action) do
+      action.windows_open url: json_ui_api_url
+    end
+
+  scroll.spacer height: 16
+
+  # Title
+  scroll.h2 text: "#{@category.titleize} Components"
+
+  # Metadata
+  if @doc['meta']
+    scroll.panels_vertical \
+      padding: { all: 12 },
+      backgroundColor: '#f8f9fa',
+      styleClasses: ['rounded'],
+      childViews: ->(meta) do
+        meta.label \
+          text: "Source: #{@doc['meta']['source_file']}",
+          styleClasses: ['text-muted', 'text-small', 'font-monospace']
+
+        if @doc['meta']['generated_at']
+          generated_time = Time.parse(@doc['meta']['generated_at']).strftime('%Y-%m-%d %H:%M') rescue @doc['meta']['generated_at']
+          meta.label \
+            text: "Generated: #{generated_time}",
+            styleClasses: ['text-muted', 'text-small']
+        end
+      end
+  end
+
+  scroll.spacer height: 24
+
+  # Component cards
+  @components.sort.each do |key, component|
+    scroll.panels_vertical \
+      id: key,
+      padding: { all: 16 },
+      styleClasses: ['card', 'rounded'],
+      childViews: ->(card) do
+        # Title
+        card.panels_horizontal align: 'middle', childViews: ->(title_row) do
+          title_row.h4 text: component['class_name']
+
+          if component['extends']
+            title_row.spacer width: 8
+            title_row.label \
+              text: "extends #{component['extends']}",
+              styleClasses: ['text-muted']
+          end
+        end
+
+        # Deprecated warning
+        if component['deprecated']
+          card.spacer height: 8
+          card.panels_vertical \
+            padding: { all: 12 },
+            backgroundColor: '#fff3cd',
+            styleClasses: ['rounded'],
+            childViews: ->(warning) do
+              warning.label text: '⚠️ Deprecated', color: '#856404', styleClass: 'font-weight-bold'
+              deprecation_text = component['deprecated'] == true ? 'This component is deprecated' : component['deprecated']
+              warning.label text: deprecation_text, color: '#856404'
+            end
+        end
+
+        # Description
+        if component['description']
+          card.spacer height: 12
+          component['description'].split("\n\n").each do |paragraph|
+            card.p text: paragraph.strip
+          end
+        end
+
+        card.spacer height: 12
+
+        # Metadata and View Details button
+        card.panels_horizontal align: 'middle', childViews: ->(actions) do
+          actions.button \
+            text: 'View Details →',
+            styleClasses: ['btn-outline-primary', 'btn-sm'],
+            onClick: ->(action) do
+              action.windows_open url: json_ui_api_url(category: @category, component: key)
+            end
+
+          if component['properties']
+            actions.spacer width: 12
+            actions.label \
+              text: "#{component['properties'].size} #{'property'.pluralize(component['properties'].size)}",
+              styleClasses: ['text-muted']
+          end
+
+          if component['examples']
+            actions.spacer width: 12
+            actions.label \
+              text: "#{component['examples'].size} #{'example'.pluralize(component['examples'].size)}",
+              styleClasses: ['text-muted']
+          end
+        end
+      end
+
+    scroll.spacer height: 16
+  end
+end

data/app/views/json_ui/garage/lists/templating.json.jbuilder

@@ -3,49 +3,73 @@ json.title 'Lists'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
 
-  page.list firstSection: ->(section) do
-    section.header padding: { top: 12, left: 16, right: 16, bottom: 12 }, childViews: ->(header) do
-      header.h3 text: 'Section Header'
+  page.list(
+    firstSection: ->(section) do
+      section.header(
+        padding: { top: 12, left: 16, right: 16, bottom: 12 },
+        childViews: ->(header) do
+          header.h3 text: 'Section Header'
+        end
+      )
+      section.rows(
+        builder: ->(template) do
+          template.thumbnail(
+            title: 'Click me',
+            onClick: ->(action) do
+              action.windows_open url: json_ui_garage_url(path: 'home/blank')
+            end,
+            accessory: ->(accessory) do
+              accessory.header(
+                width: 'matchParent',
+                backgroundColor: '#b3bac2',
+                padding: { top: 10, bottom: 10, left: 10, right: 10 },
+                childViews: ->(bottom) do
+                  bottom.label text: 'Custom row header'
+                end
+              )
+              accessory.footer(
+                width: 'matchParent',
+                backgroundColor: '#b3bac2',
+                padding: { top: 10, bottom: 10, left: 10, right: 10 },
+                childViews: ->(bottom) do
+                  bottom.label text: 'Custom row footer'
+                end
+              )
+            end
+          )
+          template.thumbnail title: 'Item with icon and subtitle', subtitle: 'Item subtitle', icon: 'facebook'
+          template.thumbnail(
+            title: 'Item with chips',
+            chips: ->(menu) do
+              menu.button text: 'Finished', styleClass: 'info'
+              menu.button props: { text: 'Succeeded', styleClass: 'success' }
+            end
+          )
+          template.thumbnail(
+            title: 'Item with thumbnail image',
+            subtitle: 'Item subtitle',
+            imageUrl: glib_json_image_standard_url,
+          )
+          template.featured(
+            title: 'Featured with featured image',
+            subtitle: 'Item subtitle',
+            imageUrl: glib_json_image_standard_url
+          )
+          template.thumbnail(
+            title: 'Item with **formatted** text',
+            subtitle: 'Item *subtitle*',
+            textFormat: :markdown
+          )
+          # TODO
+          # template.thumbnail title: 'Item with accessories (Experimental)', subtitle: 'Item subtitle', accessoryViews: ->(thumbnail) do
+          #   thumbnail.panels_horizontal childViews: ->(horizontal) do
+          #     horizontal.chip text: 'finished'
+          #     horizontal.spacer width: 10
+          #     horizontal.chip text: 'succeeded'
+          #   end
+          # end
+        end
+      )
     end
-
-    section.rows builder: ->(template) do
-      template.thumbnail title: 'Click me', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'home/blank')
-      end,
-      accessory: ->(accessory) do
-        accessory.header \
-          width: 'matchParent',
-          backgroundColor: '#b3bac2',
-          padding: { top: 10, bottom: 10, left: 10, right: 10 },
-          childViews: ->(bottom) do
-            bottom.label text: 'Custom row header'
-          end
-        accessory.footer \
-          width: 'matchParent',
-          backgroundColor: '#b3bac2',
-          padding: { top: 10, bottom: 10, left: 10, right: 10 },
-          childViews: ->(bottom) do
-            bottom.label text: 'Custom row footer'
-          end
-      end
-      template.thumbnail title: 'Item with icon and subtitle', subtitle: 'Item subtitle', icon: 'facebook'
-      template.thumbnail title: 'Item with chips', chips: ->(menu) do
-        menu.button text: 'Finished', styleClass: 'info'
-        menu.button props: { text: 'Succeeded', styleClass: 'success' }
-      end
-
-      template.thumbnail title: 'Item with thumbnail image', subtitle: 'Item subtitle', imageUrl: glib_json_image_standard_url
-      template.featured title: 'Featured with featured image', subtitle: 'Item subtitle', imageUrl: glib_json_image_standard_url
-
-      # TODO
-      # template.thumbnail title: 'Item with accessories (Experimental)', subtitle: 'Item subtitle', accessoryViews: ->(thumbnail) do
-      #   thumbnail.panels_horizontal childViews: ->(horizontal) do
-      #     horizontal.chip text: 'finished'
-      #     horizontal.spacer width: 10
-      #     horizontal.chip text: 'succeeded'
-      #   end
-      # end
-
-    end
-  end
+  )
 end

data/app/views/json_ui/garage/views/markdowns.json.jbuilder

@@ -27,6 +27,8 @@ json_ui_page json do |page|
       "\n" +
       '~~Strikethrough~~' + "\n" +
       "\n" +
+      '<u>Underlined</u>' + "\n" +
+      "\n" +
       'https://www.google.com' + "\n"
 
     scroll.spacer height: 20

data/config/routes.rb

@@ -6,6 +6,10 @@ Glib::Web::Engine.routes.draw do
     delete 'json_ui_garage', to: 'home#json_ui_garage'
     post 'chat', to: 'home#chat'
 
+    get 'json_ui_api', to: 'api_docs#index'
+    get 'json_ui_api/:category', to: 'api_docs#show', as: :json_ui_api_category
+    get 'json_ui_api/:category/:component', to: 'api_docs#component', as: :json_ui_api_component
+
     resources :glib_direct_uploads, only: [:create]
     resources :blob_url_generators, only: [:create]
     resources :errors, only: [:create]