glib-web 4.39.1 → 4.40.0

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/edit_actions.json.jbuilder

@@ -7,73 +7,103 @@ end
 page = json_ui_page json
 render "#{@path_prefix}/nav_menu", json: json, page: page
 
-page.list firstSection: ->(section) do
-  section.rows builder: ->(template) do
-    template.thumbnail \
-      title: 'Click menu (web) or swipe left (Android/iOS)',
-      subtitle: "Page index: #{page_index}",
-      leftButtons: ->(menu) do
-        menu.button \
-          styleClasses: ['icon', 'text', 'x-small'],
-          icon: 'check_box',
-          onClick: ->(subaction) do
-            subaction.dialogs_alert message: 'Tick/untick'
+page.list(
+  firstSection: ->(section) do
+    section.rows(
+      builder: ->(template) do
+        template.thumbnail(
+          title: 'Click menu (web) or swipe left (Android/iOS)',
+          subtitle: "Page index: #{page_index}",
+          leftButtons: ->(menu) do
+            menu.button(
+              styleClasses: ['icon', 'text', 'x-small'],
+              icon: 'check_box',
+              onClick: ->(subaction) do
+                subaction.dialogs_alert message: 'Tick/untick'
+              end
+            )
+          end,
+          rightButtons: ->(menu) do
+            menu.button(
+              styleClasses: ['icon', 'text', 'x-small'],
+              icon: 'share',
+              tooltip: { text: 'Share', placement: 'left' },
+              onClick: ->(subaction) do
+                subaction.dialogs_alert message: 'Share'
+              end
+            )
+            # TODO: Use popoever
+            # childButtons: ->(submenu) do
+            #   submenu.button text: 'Dropdown item 1'
+            #   submenu.button text: 'Dropdown item 2'
+            #   submenu.button text: 'Dropdown item 3'
+            # end
+            menu.button(
+              styleClasses: ['icon', 'text', 'x-small'],
+              icon: 'open_in_new',
+              tooltip: { text: 'Open in new window' },
+              onClick: ->(subaction) do
+                subaction.dialogs_alert message: 'Open'
+              end
+            )
+          end,
+          # editButtons: ->(menu) do
+          #   menu.button(
+          #     text: "Edit (ID: #{page_index})",
+          #     onClick: ->(action) do
+          #       action.dialogs_alert message: 'Perform Edit action'
+          #     end
+          #   )
+          #   menu.button(
+          #     text: 'Delete',
+          #     onClick: ->(action) do
+          #       action.dialogs_alert message: 'Perform Delete action'
+          #     end
+          #   )
+          # end,
+          onClick: ->(action) do
+            action.windows_open url: json_ui_garage_url(path: 'lists/edit_actions', page: page_index + 1)
           end
-      end, rightButtons: ->(menu) do
-        menu.button \
-          styleClasses: ['icon', 'text', 'x-small'],
-          icon: 'share',
-          tooltip: { text: 'Share', placement: 'left' }
-
-          # TODO: Use popoever
-          # childButtons: ->(submenu) do
-          #   submenu.button text: 'Dropdown item 1'
-          #   submenu.button text: 'Dropdown item 2'
-          #   submenu.button text: 'Dropdown item 3'
-          # end
-
-        menu.button \
-          styleClasses: ['icon', 'text', 'x-small'],
-          icon: 'open_in_new',
-          tooltip: { text: 'Open in new window' },
-          onClick: ->(subaction) do
-            subaction.dialogs_alert message: 'Open'
+        )
+        template.thumbnail(
+          title: 'Long press to get an alert',
+          onLongPress: ->(action) do
+            action.dialogs_alert message: 'This is an alert'
           end
-
-      end, editButtons: ->(menu) do
-        menu.button text: "Edit (ID: #{page_index})", onClick: ->(action) do
-          action.dialogs_alert message: 'Perform Edit action'
-        end
-        menu.button text: 'Delete', onClick: ->(action) do
-          action.dialogs_alert message: 'Perform Delete action'
-        end
-      end, onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'lists/edit_actions', page: page_index + 1)
-      end
-
-    template.thumbnail title: 'Long press to get an alert', onLongPress: ->(action) do
-      action.dialogs_alert message: 'This is an alert'
-    end
-
-    template.thumbnail title: 'Long press to see menu', onLongPress: ->(action) do
-      action.sheets_select message: 'Context Menu', buttons: ->(menu) do
-        menu.button icon: 'edit', text: 'Edit', onClick: ->(subaction) do
-          subaction.dialogs_alert message: 'Perform action'
-        end
-        menu.button icon: 'delete', text: 'Delete', onClick: ->(subaction) do
-          subaction.dialogs_alert message: 'Perform action'
-        end
+        )
+        template.thumbnail(
+          title: 'Long press to see menu',
+          onLongPress: ->(action) do
+            action.sheets_select(
+              message: 'Context Menu',
+              buttons: ->(menu) do
+                menu.button(
+                  icon: 'edit',
+                  text: 'Edit',
+                  onClick: ->(subaction) do
+                    subaction.dialogs_alert message: 'Perform action'
+                  end
+                )
+                menu.button(
+                  icon: 'delete',
+                  text: 'Delete',
+                  onClick: ->(subaction) do
+                    subaction.dialogs_alert message: 'Perform action'
+                  end
+                )
+              end
+            )
+          end
+        )
+        # template.thumbnail title: 'Long press to see menu', contextButtons: ->(menu) do
+        #   menu.button text: 'Edit', onClick: ->(action) do
+        #     action.dialogs_alert message: 'Perform action'
+        #   end
+        #   menu.button text: 'Delete', onClick: ->(action) do
+        #     action.dialogs_alert message: 'Perform action'
+        #   end
+        # end
       end
-    end
-
-    # template.thumbnail title: 'Long press to see menu', contextButtons: ->(menu) do
-    #   menu.button text: 'Edit', onClick: ->(action) do
-    #     action.dialogs_alert message: 'Perform action'
-    #   end
-    #   menu.button text: 'Delete', onClick: ->(action) do
-    #     action.dialogs_alert message: 'Perform action'
-    #   end
-    # end
+    )
   end
-
-end
+)