playbook_ui 15.0.0.pre.alpha.removewebpacker10589 → 15.0.0

data/lib/playbook/engine.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "action_view/railtie"
+require "webpacker/react"
 require "view_component"
 
 module Playbook

data/lib/playbook/forms/builder/form_field_builder.rb

@@ -4,58 +4,23 @@ module Playbook
   module Forms
     class Builder
       class FormFieldBuilder < Module
-        MASK_PATTERNS = {
-          "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
-          "zip_code" => '\d{5}',
-          "postal_code" => '\d{5}-\d{4}',
-          "ssn" => '\d{3}-\d{2}-\d{4}',
-          "credit_card" => '\d{4} \d{4} \d{4} \d{4}',
-          "cvv" => '\d{3,4}',
-        }.freeze
-
         def initialize(method_name, kit_name:)
           define_method method_name do |name, props: {}, **options, &block|
-            props   = props.dup
+            props[:label] = @template.label(@object_name, name) if props[:label] == true
             options = Hash(options)
 
             options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
             options[:required] = true if props[:required]
             options[:placeholder] = props[:placeholder] || ""
-            options[:type] = props[:type] if props.key?(:type)
-            options[:value] = props[:value] if props.key?(:value)
-            options[:disabled] = true if props.key?(:disabled) && props[:disabled]
-            if props.key?(:disabled)
-              cursor_style = props[:disabled] ? "not-allowed" : "pointer"
-              existing_style = options[:style] || ""
-
-              options[:style] =
-                existing_style.empty? ? "cursor: #{cursor_style}" : "#{existing_style}; cursor: #{cursor_style}"
-            end
-            if props.key?(:autocomplete)
-              options[:autocomplete] = props[:autocomplete] == true ? nil : (props[:autocomplete].presence || "off")
-            end
-            if props.key?(:mask) && props[:mask].present?
-              options[:mask] = props[:mask]
-              options[:data] = (options[:data] || {}).merge(pb_input_mask: true)
-              options[:pattern] = MASK_PATTERNS[props[:mask]]
-            end
 
             if props.key?(:validation)
               validation = props[:validation]
               options[:pattern] = validation[:pattern] if validation[:pattern].present?
-              options[:data] = (options[:data] || {}).merge(message: validation[:message]) if validation[:message].present?
+              options[:data] = { message: validation[:message] } if validation[:message].present?
             end
 
             input = super(name, **options, &block)
 
-            input_id = input[/\bid="([^"]+)"/, 1] || "#{@object_name}_#{name}"
-
-            if props[:label] == true
-              props[:label] = @template.label(@object_name, name)
-            elsif props[:label].is_a?(String)
-              props[:label] = @template.label_tag(input_id, props[:label])
-            end
-
             @template.pb_rails(kit_name, props: props) do
               input
             end

data/lib/playbook/kit_base.rb

@@ -122,7 +122,7 @@ module Playbook
       html_options.each do |key, value|
         if key == :style && value.is_a?(Hash)
           # Convert style hash to CSS string
-          merged[:style] = value.map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
+          merged[:style] = value.map { |k, v| "#{k.to_s.gsub('_', '-')}: #{v}" }.join("; ")
         else
           merged[key] = value
         end
@@ -136,27 +136,6 @@ module Playbook
       merged.deep_merge(data_attributes)
     end
 
-    # Custom react_component helper to replace Webpacker React
-    # This will render a div with data attributes for the component name and props
-    # The mounting script will look for these divs and mount the appropriate React components
-    # Sister def in app/helpers/react_helper in playbook-website. Any changes here should be reflected there.
-    def react_component(component_name, props = {}, html_options = {})
-      # Convert props to JSON for the data attribute
-      props_json = props.to_json
-
-      # Build the HTML attributes
-      html_attrs = {
-        "data-pb-react-component" => component_name,
-        "data-pb-react-props" => props_json,
-      }
-
-      # Merge with any additional HTML options
-      html_attrs.merge!(html_options)
-
-      # Return the div element
-      content_tag(:div, "", html_attrs)
-    end
-
     def global_inline_props
       {
         height: height,
@@ -193,7 +172,7 @@ module Playbook
     end
 
     def dynamic_inline_props
-      styles = global_inline_props.map { |key, value| "#{key.to_s.tr('_', '-')}: #{value}" if inline_validator(key, value) }.compact
+      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value}" if inline_validator(key, value) }.compact
       styles.join("; ").presence
     end
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "15.0.0"
-  VERSION = "15.0.0.pre.alpha.removewebpacker10589"
+  PREVIOUS_VERSION = "14.25.0"
+  VERSION = "15.0.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.0.0.pre.alpha.removewebpacker10589
+  version: 15.0.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-18 00:00:00.000000000 Z
+date: 2025-09-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -53,6 +53,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
+- !ruby/object:Gem::Dependency
+  name: react-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.6.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.6.1
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -68,19 +82,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 2.83.0
 - !ruby/object:Gem::Dependency
-  name: vite_rails
+  name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.3.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.3.2
 - !ruby/object:Gem::Dependency
   name: brakeman
   requirement: !ruby/object:Gem::Requirement
@@ -1206,6 +1220,7 @@ files:
 - app/pb_kits/playbook/pb_dialog/dialog.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog.rb
 - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
+- app/pb_kits/playbook/pb_dialog/dialogHelper.js
 - app/pb_kits/playbook/pb_dialog/dialog_body.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog_body.rb
 - app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb
@@ -2076,8 +2091,6 @@ files:
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.html.erb
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.jsx
-- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb
-- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx
 - app/pb_kits/playbook/pb_loading_inline/docs/example.yml
 - app/pb_kits/playbook/pb_loading_inline/docs/index.js
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
@@ -2401,71 +2414,6 @@ files:
 - app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
 - app/pb_kits/playbook/pb_passphrase/passphrase.rb
 - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss
-- app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js
-- app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts
-- app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb
-- app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss
-- app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js
-- app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts
-- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb
-- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
 - app/pb_kits/playbook/pb_person/_person.tsx
 - app/pb_kits/playbook/pb_person/docs/_description.md
@@ -3163,9 +3111,6 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md
-- app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb
-- app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx
-- app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb
@@ -3675,13 +3620,12 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_line_graph-DeH7NK-i.js
-- dist/chunks/_typeahead-CCGp0OQe.js
-- dist/chunks/_weekday_stacked-BHLwECdV.js
-- dist/chunks/componentRegistry-DzmmLR2x.js
+- dist/chunks/_line_graph-CIyKqNGy.js
+- dist/chunks/_typeahead-B-mDRLxH.js
+- dist/chunks/_weekday_stacked-B_lp1Spt.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-QZuu1ltS.js
-- dist/chunks/pb_form_validation-CleM960_.js
+- dist/chunks/lib-DgtxnJqa.js
+- dist/chunks/pb_form_validation-_NsOWfBS.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
-
-<br/>
-
-<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { LoadingInline } from 'playbook-ui'
-
-const LoadingInlineVariant = (props) => {
-  return (
-    <div>
-      <LoadingInline 
-          text=" Dotted Spinner" 
-          variant="dotted" 
-          {...props}
-      />
-
-      <br />
-  
-      <LoadingInline
-          text=" Solid Spinner"
-          variant="solid"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default LoadingInlineVariant

data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx

@@ -1,62 +0,0 @@
-import React, { useMemo } from "react"
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-import pbBarGraphTheme from "./pbBarGraphTheme"
-
-import classnames from "classnames";
-
-type PbBarGraphProps = {
-  
-  options: Record<string, unknown>
-  className?: string
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
-  id: string;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)};
-}
-
-const PbBarGraph = ({
-  aria = {},
-  data = {},
-  id,
-  htmlOptions = {},
-  options,
-  className = "pb_pb_bar_graph",
-}: PbBarGraphProps): React.ReactElement => {
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-
-  const mergedOptions = useMemo(() => {
-    if (!options || typeof options !== "object") {
-      // eslint-disable-next-line no-console
-      console.error("❌ Invalid options passed to <BarGraph />", options)
-      return {}
-    }
-
-    return Highcharts.merge({}, pbBarGraphTheme, options)
-  }, [options])
-
-  return (
-  
-    <div>
-      <HighchartsReact
-          containerProps={{
-                  className: classnames(globalProps, className),
-                  id: id,
-                  ...ariaProps,
-                  ...dataProps,
-                  ...htmlProps
-                }}
-          highcharts={Highcharts}
-          options={mergedOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraph

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb

@@ -1,35 +0,0 @@
-<% chart_data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-import colors from '../../tokens/exports/_colors.module.scss'
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
-}
-
-const PbBarGraphColors = () => {
-
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphColors

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md

@@ -1 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements. To accomplish this, you can use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-You can use Playbook's color tokens or use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb

@@ -1,38 +0,0 @@
-<% chart_data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: 'Solar Employment Growth by Sector, 2010-2016',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-  const chartData = [{
-    name: 'Installation',
-    data: [1475, 200, 3000, 654, 656],
-  }, {
-    name: 'Manufacturing',
-    data: [4434, 524, 2320, 440, 500],
-  }, {
-    name: 'Sales & Distribution',
-    data: [3387, 743, 1344, 434, 440],
-  }, {
-    name: 'Project Development',
-    data: [3227, 878, 999, 780, 1000],
-  }, {
-    name: 'Other',
-    data: [1111, 677, 3245, 500, 200],
-  }]
-
-  const chartOptions = {
-    series: chartData,
-    title: {
-      text: 'Solar Employment Growth by Sector, 2010-2016',
-    },
-    subtitle: {
-      text: 'Source: thesolarfoundation.com',
-    },
-    xAxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-    },
-    yAxis: {
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-  }
-
-const PbBarGraphDefault = (props) => {
-
-  return (
-    <div>
-      <PbBarGraph
-          {...props}
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphDefault

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb

@@ -1,46 +0,0 @@
-<% chart_data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<% chart_options_pixel = {
- chart: {
-    height: "300"
-  },
-  series: chart_data,
-  title: {
-    text: "Fixed Height (300px)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  }
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options_pixel}) %>
-
-<br /><br />
-
-<% chart_options_percentage = {
- chart: {
-    height: "50%"
-  },
-  series: chart_data,
-  title: {
-    text: "Percentage Height (50%)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  }
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options_percentage}) %>