Implement NumberedList

Author: blazejkustra

help/_plugins/SitePostRender.rb

@@ -107,7 +107,8 @@ def self.analyze_used_components(content)
         'View' => content.include?('<View'),
         'Text' => content.include?('<Text'),
         'TextLink' => content.include?('<TextLink'),
-        'BulletList' => content.include?('<BulletList')
+        'BulletList' => content.include?('<BulletList'),
+        'NumberedList' => content.include?('<NumberedList')
       }
       components.select { |_, used| used }.keys
     end
@@ -126,6 +127,7 @@ def self.generate_imports(components)
       component_imports << "import BulletList from '@components/SidePanel/HelpComponents/HelpBulletList';" if components.include?('BulletList')
       component_imports << "import Text from '@components/Text';" if components.include?('Text')
       component_imports << "import TextLink from '@components/TextLink';" if components.include?('TextLink')
+      component_imports << "import NumberedList from '@components/SidePanel/HelpComponents/HelpNumberedList';" if components.include?('NumberedList')
 
       # Add style imports
       base_imports << "import type {ThemeStyles} from '@styles/index';"
@@ -199,6 +201,7 @@ def self.html_node_to_RN(node, indent_level = 0)
         'div' => method(:process_div),
         'p' => method(:process_paragraph),
         'ul' => method(:process_unordered_list),
+        'ol' => method(:process_ordered_list),
         'li' => method(:process_list_item),
         'h1' => method(:process_heading),
         'h2' => method(:process_heading),
@@ -264,6 +267,33 @@ def self.process_unordered_list(node, indent_level)
       TS
     end
 
+    def self.process_ordered_list(node, indent_level)
+      items = node.xpath('./li').map do |li|
+        contains_ol = li.xpath('.//ol').any?
+
+        li_parts = li.children.map { |child| html_node_to_RN(child, 0) }
+
+        if contains_ol
+          indented_li_parts = li_parts.map do |part|
+            part.lines.map { |line| "#{'  ' * (indent_level + 3)}#{line.rstrip}" }.join("\n")
+          end.join("\n")
+
+          "#{'  ' * (indent_level + 2)}<>\n#{indented_li_parts}\n#{'  ' * (indent_level + 2)}</>"
+        else
+          "#{'  ' * (indent_level + 2)}<Text style={styles.textNormal}>#{li_parts.join.strip}</Text>"
+        end
+      end
+
+      <<~TS.chomp
+        #{'  ' * indent_level}<NumberedList
+        #{'  ' * indent_level}  styles={styles}
+        #{'  ' * indent_level}  items={[
+        #{items.join(",\n")}
+        #{'  ' * indent_level}  ]}
+        #{'  ' * indent_level}/>
+      TS
+    end
+
     def self.process_list_item(node, indent_level)
       '' # handled in <ul>
     end

src/components/SidePanel/HelpComponents/HelpNumberedList.tsx

@@ -0,0 +1,25 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import type {ThemeStyles} from '@styles/index';
+
+type HelpNumberedListProps = {
+    styles: ThemeStyles;
+    items: ReactNode[];
+};
+
+function HelpNumberedList({items, styles}: HelpNumberedListProps) {
+    return items.map((item, index) => (
+        <View
+            // eslint-disable-next-line react/no-array-index-key
+            key={`numbered-list-item-${index}`}
+            style={[styles.flexRow, styles.alignItemsStart, styles.mt3]}
+        >
+            <Text style={[styles.textNormal, styles.pr2, styles.userSelectNone]}>{`${index + 1}.`}</Text>
+            <Text style={[styles.flex1]}>{item}</Text>
+        </View>
+    ));
+}
+
+export default HelpNumberedList;