Merge branch 'master' into PBNTR-515-typeahead-margin-bottom-redux

playbook-website/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ../playbook
   specs:
-    playbook_ui (14.3.1)
+    playbook_ui (14.4.0)
       actionpack (>= 5.2.4.5)
       actionview (>= 5.2.4.5)
       activesupport (>= 5.2.4.5)

playbook-website/app/controllers/pages_controller.rb

@@ -3,6 +3,8 @@
 require "will_paginate"
 require "playbook/pagination_renderer"
 require "will_paginate/array"
+require "parser/current"
+require "erb"
 require "ostruct"
 
 class PagesController < ApplicationController
@@ -145,8 +147,99 @@ def kit_playground_rails
     render "pages/rails_in_react_playground", layout: "layouts/fullscreen"
   end
 
+  def parse_erb(code)
+    parsed = code.scan(/<%=?\s*(.*?)\s*%>/).flatten.join("\n")
+    Parser::CurrentRuby.parse(parsed)
+  end
+
+  def detect_ruby_methods(root_node)
+    stack = [root_node] # Initialize the stack with the root node
+    methods = []
+    until stack.empty?
+      node = stack.pop # Get the current node from the stack
+
+      next unless node.is_a?(Parser::AST::Node)
+
+      # Check if the current node is a `:send` node and has `:system` as the method name
+      methods.push(node.children[1]) if node.type == :send
+      # Push all child nodes onto the stack
+      stack.concat(node.children)
+    end
+    methods
+  end
+
+  def white_list
+    %i[<< to_s pb_rails +@ freeze]
+  end
+
+  # Define methods outside of the main method
+  def add_xstr_node(node, xstr_nodes)
+    xstr_nodes << node if node.type == :xstr
+  end
+
+  def add_gvar_node(node, gvar_nodes)
+    gvar_nodes << node if node.type == :gvar
+  end
+
+  def traverse_node_gvar(node, xstr_nodes)
+    case node
+    when Parser::AST::Node
+      add_gvar_node(node, xstr_nodes)
+      # Recur for each child node
+      node.children.each do |child|
+        traverse_node_gvar(child, xstr_nodes)
+      end
+    end
+  end
+
+  def detect_gvar_nodes(ast_node)
+    gvar_nodes = []
+    # Start traversing from the root node
+    traverse_node_gvar(ast_node, gvar_nodes)
+    gvar_nodes
+  end
+
+  def traverse_node(node, xstr_nodes)
+    case node
+    when Parser::AST::Node
+      add_xstr_node(node, xstr_nodes)
+      # Recur for each child node
+      node.children.each do |child|
+        traverse_node(child, xstr_nodes)
+      end
+    end
+  end
+
+  def detect_xstr_nodes(ast_node)
+    xstr_nodes = []
+    # Start traversing from the root node
+    traverse_node(ast_node, xstr_nodes)
+    xstr_nodes
+  end
+
+  def is_erb_safe?(code)
+    node = parse_erb(code)
+    detect_gvar_nodes(parse_erb(erb_code_params)).empty? &&
+      detect_ruby_methods(node) - white_list == [] &&
+      detect_xstr_nodes(parse_erb(erb_code_params)).empty?
+  end
+
+  def unsafe_code
+    detect_ruby_methods(parse_erb(erb_code_params)).uniq - white_list
+  end
+
+  def playground_response
+    if is_erb_safe?(erb_code_params)
+      erb_code_params
+    elsif unsafe_code.any?
+      "The code provided can't be run please remove these methods: #{unsafe_code.join(', ')}"
+    else
+      "The code provided can't be run. Only use pb_rails."
+    end
+  end
+
   def rails_pg_render
-    render inline: erb_code_params
+    render inline: playground_response
   rescue => e
     render json: { error: e }, status: 400
   end

playbook-website/app/javascript/components/MainSidebar/MenuData/SidebarNavItems.ts

@@ -42,11 +42,11 @@ export const SideBarNavItems = [
         leftIcon:"vial"
     },
 
-    // {
-    //     name: "Playground",
-    //     key: "top-nav-item-6",
-    //     link: "/kit_playground_rails",
-    //     children: false,
-    //     leftIcon:"laptop-code"
-    // }
+    {
+      name: "Playground",
+      key: "top-nav-item-6",
+      link: "/kit_playground_rails",
+      children: false,
+      leftIcon:"laptop-code"
+    }
 ]

playbook-website/config/routes.rb

@@ -37,6 +37,8 @@
   get "kits/:name/sandpack",        to: "pages#kit_show_new",         as: "kit_show_new"
   get "kits/:name/rails_in_react",  to: "pages#rails_in_react",       as: "rails_in_react"
   get "kits/:name/rails_raw",       to: "pages#rails_raw",            as: "rails_raw"
+  get "kit_playground_rails",       to: "pages#kit_playground_rails", as: "kit_playground_rails"
+  post "rails_pg_render",           to: "pages#rails_pg_render",      as: "rails_pg_render"
 
   # Docs
   get "guides/:parent",         to: "guides#md_doc", as: "guides_parent"

playbook-website/lib/markdown_helper.rb

@@ -72,6 +72,9 @@ def self.cache_key(text)
       def render_code(text, language)
         formatter = Rouge::Formatters::HTML.new(scope: ".highlight")
         lexer = Rouge::Lexer.find(language)
+
+        lexer = Rouge::Lexers::PlainText.new if lexer.nil?
+
         formatter.format(lexer.lex(text))
       end
 

playbook-website/spec/helpers/markdown_helper_spec.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+# spec/helpers/markdown_helper_spec.rb
+require "rails_helper"
+
+RSpec.describe PlaybookWebsite::Markdown::Helper do
+  describe "#render_code" do
+    let(:helper) { Class.new { include PlaybookWebsite::Markdown::Helper }.new }
+    let(:formatter) { instance_double(Rouge::Formatters::HTML) }
+    let(:ruby_lexer) { instance_double(Rouge::Lexers::Ruby) }
+    let(:plain_text_lexer) { instance_double(Rouge::Lexers::PlainText) }
+
+    before do
+      allow(Rouge::Formatters::HTML).to receive(:new).and_return(formatter)
+      allow(formatter).to receive(:format).and_return("<formatted_code>")
+    end
+
+    it "formats code with the correct lexer when language is found" do
+      allow(Rouge::Lexer).to receive(:find).with("ruby").and_return(ruby_lexer)
+      allow(ruby_lexer).to receive(:lex).with("puts 'Hello, World!'").and_return("lexed_code")
+
+      expect(formatter).to receive(:format).with("lexed_code")
+      result = helper.render_code("puts 'Hello, World!'", "ruby")
+      expect(result).to eq("<formatted_code>")
+    end
+
+    it "uses PlainText lexer when language is not found" do
+      allow(Rouge::Lexer).to receive(:find).with("unknown_language").and_return(nil)
+      allow(Rouge::Lexers::PlainText).to receive(:new).and_return(plain_text_lexer)
+      allow(plain_text_lexer).to receive(:lex).with("Some plain text").and_return("lexed_plain_text")
+
+      expect(formatter).to receive(:format).with("lexed_plain_text")
+      result = helper.render_code("Some plain text", "unknown_language")
+      expect(result).to eq("<formatted_code>")
+    end
+
+    it "handles nil language parameter" do
+      allow(Rouge::Lexer).to receive(:find).with(nil).and_return(nil)
+      allow(Rouge::Lexers::PlainText).to receive(:new).and_return(plain_text_lexer)
+      allow(plain_text_lexer).to receive(:lex).with("Some text").and_return("lexed_text")
+
+      expect(formatter).to receive(:format).with("lexed_text")
+      result = helper.render_code("Some text", nil)
+      expect(result).to eq("<formatted_code>")
+    end
+  end
+end

playbook/CHANGELOG.md

@@ -1,3 +1,71 @@
+# Spot Everyone at a Glance: Meet the New Multiple Users Component!
+##### September 18, 2024 
+
+![14 4 0](https://github.com/user-attachments/assets/9e1a90e9-7a5c-4e43-8192-8fbe74c8de28)
+
+We've added a fresh option to our MultipleUsersStacked component with the new bubble variant! This update showcases full user avatars in a sleek, Apple-inspired grid layout, enhancing recognition and clarity. It's a versatile addition to your toolkit, offering a refined way to display multiple users!
+
+[14.4.0](https://github.com/powerhome/playbook/tree/14.4.0) full list of changes:
+
+**Kit Enhancements:**
+- Bubble Variant to Multiple Users Stacked [\#3692](https://github.com/powerhome/playbook/pull/3692) ([kangaree](https://github.com/kangaree))
+- Form Pills: Add All Color Options [\#3636](https://github.com/powerhome/playbook/pull/3636) ([elisashapiro](https://github.com/elisashapiro))
+- Implementing Radio customChildren Prop [\#3685](https://github.com/powerhome/playbook/pull/3685) ([carloslimasd](https://github.com/carloslimasd))
+
+**Fixed Bugs:**
+- Fix Undefined Method Error in SamplesController#show [\#3675](https://github.com/powerhome/playbook/pull/3675) ([skduncan](https://github.com/skduncan))
+- Make Rails Icons fixed-width [\#3656](https://github.com/powerhome/playbook/pull/3656) ([skduncan](https://github.com/skduncan))
+
+**Improvements:**
+- Remove Bad UTF-8 Character [\#3679](https://github.com/powerhome/playbook/pull/3679) ([@dhhuynh2](https://github.com/dhhuynh2))
+- Playground Sanitization Security [\#3624](https://github.com/powerhome/playbook/pull/3624) 
+- Upgraded Popper and React-Popper [\#3681](https://github.com/powerhome/playbook/pull/3681) ([jasperfurniss](https://github.com/jasperfurniss))
+
+
+[Full Changelog](https://github.com/powerhome/playbook/compare/14.3.2...14.4.0)
+
+
+# Star Ratings and Page-Turning Upgrades 💫
+##### September 6, 2024 
+
+![anouncement](https://github.com/user-attachments/assets/d10fdaa7-3961-4d16-9e65-ce9a282c0188)
+
+Our Star Rating kit now shines brighter with added interactivity and hover effects! ⭐ And don’t forget to flip through content with our Pagination kit, now available in React in addition to Rails.
+
+[14.3.2](https://github.com/powerhome/playbook/tree/14.3.2) full list of changes:
+
+**Kit Enhancements:**
+
+- Add all Target Options to the Hashtag and Home Address Street Kits [\#3650](https://github.com/powerhome/playbook/pull/3650) ([skduncan](https://github.com/skduncan))
+- Adding Default Value Prop to Rails Star Rating Kit [\#3629](https://github.com/powerhome/playbook/pull/3629) ([carloslimasd](https://github.com/carloslimasd))
+- Collapsible Optional Icon [\#3643](https://github.com/powerhome/playbook/pull/3643) ([elisashapiro](https://github.com/elisashapiro))
+- Add "loading" Variant to Circle Icon Button [\#3633](https://github.com/powerhome/playbook/pull/3633) ([kangaree](https://github.com/kangaree))
+
+**Fixed Bugs:**
+
+- Return empty string for SVG with HTTP errors [\404s, timeouts] [\#3658](https://github.com/powerhome/playbook/pull/3658) ([kangaree](https://github.com/kangaree))
+- Redirect If Guide Doesn't Exist [\#3653](https://github.com/powerhome/playbook/pull/3653) ([kangaree](https://github.com/kangaree))
+- React pagination glitchiness [\#3647](https://github.com/powerhome/playbook/pull/3647) ([elisashapiro](https://github.com/elisashapiro))
+- Fix @import playbook.scss Errors - Fix Theming / Overriding SCSS Variables [\#3608](https://github.com/powerhome/playbook/pull/3608) ([kangaree](https://github.com/kangaree))
+- Timestamp Kit Rails: Elapsed Time Variant Issue [\#3606](https://github.com/powerhome/playbook/pull/3606) ([skduncan](https://github.com/skduncan))
+- Fix Github Action Bug that Breaks Build [\#3655](https://github.com/powerhome/playbook/pull/3655) ([jasperfurniss](https://github.com/jasperfurniss))
+- Testing Incrementing for Github Action RC [\#3651](https://github.com/powerhome/playbook/pull/3651) ([jasperfurniss](https://github.com/jasperfurniss))
+- Fix Missing Template Error in PagesController [\#3645](https://github.com/powerhome/playbook/pull/3645) ([skduncan](https://github.com/skduncan))
+- Fixing TextArea Duplicated Classname [\#3660](https://github.com/powerhome/playbook/pull/3660) ([carloslimasd](https://github.com/carloslimasd))
+- Fix Collapsible Glitchiness When State Changes Quickly [\#3664](https://github.com/powerhome/playbook/pull/3664) ([kangaree](https://github.com/kangaree))
+
+**Improvements:**
+
+- Fixes RC Github Action Limit [\#3666](https://github.com/powerhome/playbook/pull/3666) ([jasperfurniss](https://github.com/jasperfurniss))
+- Fix Kebab Logic [\#3649](https://github.com/powerhome/playbook/pull/3649) ([markdoeswork](https://github.com/markdoeswork))
+- Dialog Disable Rails - Remove Duplicate Data [\#3646](https://github.com/powerhome/playbook/pull/3646) ([markdoeswork](https://github.com/markdoeswork))
+- RTE Previewer + Output Rails [\#3625](https://github.com/powerhome/playbook/pull/3625) ([elisashapiro](https://github.com/elisashapiro))
+- Implement Error Handling and Additions for Github Action [\#3652](https://github.com/powerhome/playbook/pull/3652) ([jasperfurniss](https://github.com/jasperfurniss))
+
+
+[Full Changelog](https://github.com/powerhome/playbook/compare/14.3.0...14.3.2)
+
+
 # ⭐ Improving Usability, Flexibility, and Accessibility ⭐
 ##### August 31st, 2024
 

playbook/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    playbook_ui (14.3.1)
+    playbook_ui (14.4.0)
       actionpack (>= 5.2.4.5)
       actionview (>= 5.2.4.5)
       activesupport (>= 5.2.4.5)

playbook/app/entrypoints/playbook-rails.js

@@ -45,6 +45,9 @@ PbNav.start()
 import PbStarRating from 'kits/pb_star_rating'
 PbStarRating.start()
 
+import PbRadio from 'kits/pb_radio'
+PbRadio.start()
+
 import 'flatpickr'
 
 // React-Rendered Rails Kits =====

playbook/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts

@@ -6,6 +6,10 @@ export const showElement = (elem: HTMLElement) => {
   elem.style.overflow = "hidden"
   // Once the transition is complete, remove the inline max-height so the content can scale responsively
   window.setTimeout(() => {
+    // If a user toggles multiple times quickly in a row, 'is-visible' can be removed by hideElement's timeout
+    if (!elem.classList.contains('is-visible')) {
+      elem.classList.add('is-visible')
+    }
     elem.style.height = '';
     elem.style.overflow = "visible"
   }, 300);

playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -322,8 +322,7 @@
   background: rgba(0,0,0,0.05);
 }
 .flatpickr-current-month .numInputWrapper {
-  width: 6ch;
-  width: 7ch\0;
+  width: 7ch;
   display: inline-block;
 }
 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
@@ -774,4 +773,4 @@ span.flatpickr-weekday {
     -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0);
   }
-}
+}