playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx

@@ -0,0 +1,90 @@
+import React from 'react'
+
+import TreemapChart from '../_treemap_chart'
+
+const chartData = [
+  {
+    name: "Evergreen",
+    id: "Evergreen",
+    color: "#0056CF",
+  }, {
+    name: "Pine",
+    id: "Pine",
+    parent: "Evergreen",
+    value: 300,
+    color: "#477BC4",
+  }, {
+    name: "Ponderosa Pine",
+    parent: "Pine",
+    value: 50,
+  }, {
+    name: "Scots Pine",
+    parent: "Pine",
+    value: 150,
+  }, {
+    name: "White Pine",
+    parent: "Pine",
+    value: 100,
+  }, {
+    name: "Douglas Fir",
+    parent: "Evergreen",
+    value: 150,
+  }, {
+    name: "Juniper",
+    parent: "Evergreen",
+    value: 80,
+  }, {
+    name: "Hemlock",
+    parent: "Evergreen",
+    value: 30,
+  }, {
+    name: "Deciduous",
+    id: "Deciduous",
+    color: "#F9BB00",
+  }, {
+    name: "Oak",
+    parent: "Deciduous",
+    value: 80,
+  }, {
+    name: "Maple",
+    id: "Maple",
+    parent: "Deciduous",
+    value: 180,
+    color: "#F7CE52",
+  }, {
+    name: "Red Maple",
+    parent: "Maple",
+    value: 80,
+  }, {
+    name: "Sugar Maple",
+    parent: "Maple",
+    value: 100,
+  }, {
+    name: "Beech",
+    parent: "Deciduous",
+    value: 50,
+  }, {
+    name: "Willow",
+    parent: "Deciduous",
+    value: 100,
+  }, {
+    name: "Juniper",
+    parent: "Deciduous",
+    value: 90,
+  },
+]
+
+const TreemapChartDrillable = (props) => (
+  <div>
+    <TreemapChart
+        chartData={chartData}
+        drillable
+        grouped
+        id="treemap-drillable"
+        title="Drillable Grouped Tree Species"
+        {...props}
+    />
+  </div>
+)
+
+export default TreemapChartDrillable

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md

@@ -0,0 +1 @@
+Adding the `drillable` prop allows the tree to be traversed up and down by clicking into each box. Relationships are established through the `chartData`, detailed in the <a href="#treemap-grouped-data">Grouped Data section above</a>.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb

@@ -0,0 +1,54 @@
+<% data = [
+  {
+    name: 'Meat',
+    id: 'Meat',
+    color: "#0056CF",
+  }, {
+    name: 'Pepperoni',
+    parent: 'Meat',
+    value: 250,
+  }, {
+    name: 'Meatball',
+    parent: 'Meat',
+    value: 400,
+  }, {
+    name: "Anchovy",
+    parent: 'Meat',
+    value: 40,
+  }, {
+    name: 'Vegetarian',
+    id: 'Vegetarian',
+    color: "#F9BB00",
+  }, {
+    name: 'Onions',
+    parent: 'Vegetarian',
+    value: 300,
+  }, {
+    name: 'Pineapple',
+    parent: 'Vegetarian',
+    value: 90,
+  }, {
+    name: "Peppers",
+    parent: 'Vegetarian',
+    value: 80,
+  }, {
+    name: "Specialty",
+    id: "Specialty",
+    color: "#9E64E9",
+  },{
+    name: "Buffalo Chicken",
+    parent: "Specialty",
+    value: 400,
+  }, {
+    name: "Supreme",
+    parent: "Specialty",
+    value: 150,
+  }
+] %>
+
+<%= pb_rails("treemap_chart", props: {
+    chart_data: data,
+    grouped: true,
+    id: "treemap-grouped",
+    title: "Grouped Toppings",
+}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import TreemapChart from '../_treemap_chart'
+
+const chartData = [
+  {
+    name: 'Meat',
+    id: 'Meat',
+    color: "#0056CF",
+  }, {
+    name: 'Pepperoni',
+    parent: 'Meat',
+    value: 250,
+  }, {
+    name: 'Meatball',
+    parent: 'Meat',
+    value: 400,
+  }, {
+    name: "Anchovy",
+    parent: 'Meat',
+    value: 40,
+  }, {
+    name: 'Vegetarian',
+    id: 'Vegetarian',
+    color: "#F9BB00",
+  }, {
+    name: 'Onions',
+    parent: 'Vegetarian',
+    value: 300,
+  }, {
+    name: 'Pineapple',
+    parent: 'Vegetarian',
+    value: 90,
+  }, {
+    name: "Peppers",
+    parent: 'Vegetarian',
+    value: 80,
+  }, {
+    name: "Specialty",
+    id: "Specialty",
+    color: "#9E64E9",
+  },{
+    name: "Buffalo Chicken",
+    parent: "Specialty",
+    value: 400,
+  }, {
+    name: "Supreme",
+    parent: "Specialty",
+    value: 150,
+  }
+]
+
+const TreemapChartGroupedData = (props) => (
+  <div>
+    <TreemapChart
+        chartData={chartData}
+        grouped
+        id="treemap-grouped-data"
+        title="Grouped Toppings"
+        {...props}
+    />
+  </div>
+)
+
+export default TreemapChartGroupedData

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md

@@ -0,0 +1,3 @@
+Data can be grouped into distinct segments by specifying the relationship in the `chartData`. For a point to be a parent, it needs an `id` of type `string` included in its object. Any other data points may then reference that `id` as their `parent` value to establish the tree structure.
+
+Parents can also be passed a custom color to be applied to all of its child points.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb

@@ -0,0 +1,37 @@
+<% data = [
+  {
+    name: "Pepperoni",
+    parent: "Toppings",
+    value: 600,
+  }, {
+    name: "Cheese",
+    parent: "Toppings",
+    value: 510,
+  }, {
+    name: "Mushroom",
+    parent: "Toppings",
+    value: 330,
+  },{
+    name: "Onions",
+    parent: "Toppings",
+    value: 250,
+  }, {
+    name: "Olives",
+    parent: "Toppings",
+    value: 204,
+  }, {
+    name: "Pineapple",
+    parent: "Toppings",
+    value: 90,
+  }, {
+    name: "Pizza Toppings",
+    id: "Toppings",
+  },
+] %>
+
+<%= pb_rails("treemap_chart", props: {
+    chart_data: data,
+    id: "treemap-tooltip",
+    title: "Favored Pizza Toppings",
+    tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>",
+}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import TreemapChart from '../_treemap_chart'
+
+const chartData = [
+  {
+    name: "Pepperoni",
+    parent: "Toppings",
+    value: 600,
+  }, {
+    name: "Cheese",
+    parent: "Toppings",
+    value: 510,
+  }, {
+    name: "Mushroom",
+    parent: "Toppings",
+    value: 330,
+  },{
+    name: "Onions",
+    parent: "Toppings",
+    value: 250,
+  }, {
+    name: "Olives",
+    parent: "Toppings",
+    value: 204,
+  }, {
+    name: "Pineapple",
+    parent: "Toppings",
+    value: 90,
+  }, {
+    name: "Pizza Toppings",
+    id: "Toppings",
+  },
+]
+
+const TreemapChartTooltip = (props) => (
+  <div>
+    <TreemapChart
+        chartData={chartData}
+        id="treemap-tooltip"
+        title="Favored Pizza Toppings"
+        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>'
+        {...props}
+    />
+  </div>
+)
+
+export default TreemapChartTooltip

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md

@@ -0,0 +1,3 @@
+A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
+
+`{point.name}` and `{point.value}` are useful values that can be referenced for each point in the graph.

data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml

@@ -0,0 +1,15 @@
+examples:
+
+  rails:
+  - treemap_chart_default: Default
+  - treemap_chart_grouped_data: Grouped Data
+  - treemap_chart_drillable: Drillable
+  - treemap_chart_colors: Color Overrides
+  - treemap_chart_tooltip: Tooltip Customization
+
+  react:
+  - treemap_chart_default: Default
+  - treemap_chart_grouped_data: Grouped Data
+  - treemap_chart_drillable: Drillable
+  - treemap_chart_colors: Color Overrides
+  - treemap_chart_tooltip: Tooltip Customization

data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js

@@ -0,0 +1,5 @@
+export { default as TreemapChartDefault } from './_treemap_chart_default.jsx'
+export { default as TreemapChartGroupedData } from './_treemap_chart_grouped_data.jsx'
+export { default as TreemapChartDrillable } from './_treemap_chart_drillable.jsx'
+export { default as TreemapChartColors } from './_treemap_chart_colors.jsx'
+export { default as TreemapChartTooltip } from './_treemap_chart_tooltip.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_description.md

@@ -0,0 +1 @@
+Typeahead is auto suggestion or completion based on what the user is starting to type, gets refined as the user types more.

data/app/pb_kits/playbook/pb_typeahead/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Avoid using on questionaires, surverys, text input and textarea when users answers/inputs will be individualized.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx

@@ -0,0 +1,58 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../..'
+
+/**
+ *
+ * @const filterResults
+ * @ignore
+ * @returns {[Object]} - a custom mapping of objects, minimally containing
+ * `value` and `label` among other possible fields
+ * @summary - for doc example purposes only
+ */
+
+const filterResults = (results) =>
+  results.items.map((result) => {
+    return {
+      label: result.login,
+      value: result.id,
+    }
+  })
+
+/**
+*
+* @const promiseOptions
+* @ignore
+* @returns {Promise} - fetch API data results from Typeahead input text
+* @see - https://react-select.com/home#async
+* @summary - for doc example purposes only
+*/
+
+const promiseOptions = (inputValue) =>
+  new Promise((resolve) => {
+    if (inputValue) {
+      fetch(`https://api.github.com/search/users?q=${inputValue}`)
+        .then((response) => response.json())
+        .then((results) => {
+          resolve(results.items ? filterResults(results) : [])
+        })
+    } else {
+      resolve([])
+    }
+  })
+
+const TypeaheadAsyncCreateable = (props) => {
+  return (
+    <Typeahead
+        async
+        createable
+        isMulti
+        label="Existing or User Created Options"
+        loadOptions={promiseOptions}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadAsyncCreateable

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx

@@ -0,0 +1,25 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../..'
+
+const options = [
+  { label: 'Jardim', value: 'Portuguese' },
+  { label: 'Garten', value: 'German' },
+  { label: 'Giardino', value: 'Italian' },
+  { label: 'Jardín', value: 'Spanish' },
+]
+
+const TypeaheadCreateable = (props) => {
+  return (
+    <Typeahead
+        createable
+        isMulti
+        label="User Created Options"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadCreateable

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -0,0 +1,63 @@
+<%= pb_rails("typeahead", props: {
+  label: "user",
+  name: :foo,
+  data: { typeahead_example: true },
+  input_options: {
+    classname: "my-typeahead-class",
+    data: {
+      typeahead_testing: "data field test"
+    },
+    id: "typeahead-input-id-test",
+  },
+})%>
+
+<br><br><br>
+
+<%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
+  <%= pb_rails("body") do %>
+    Use the above input to search for users on Github, and see the results as you type.
+  <% end %>
+
+  <%= pb_rails("body") do %>
+    When you make a selection, you will see it appear in the list below
+  <% end %>
+
+  <div data-selected-option></div>
+<% end %>
+
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
+    }) %>
+</template>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
+          return wrapper
+        }))
+      })
+  })
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExample) return;
+
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -0,0 +1,24 @@
+// @flow
+
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadDefault = (props) => {
+  return (
+    <Typeahead
+        label="Colors"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadDefault

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+
+%>
+
+<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-error-example-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx

@@ -0,0 +1,39 @@
+// @flow
+
+import React, { useState, useEffect } from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadErrorState = (props) => {
+  const [errorState, setErrorState] = useState("Please make a valid selection");
+  const [searchValue, setSearchValue] = useState(null);
+  
+  const handleOnChange = (value) => setSearchValue(value)
+
+    useEffect(() => {
+      if(searchValue) {
+        setErrorState("")
+      } else {
+        setErrorState("Please make a valid selection")
+      }
+    }, [searchValue])
+  
+  return (
+    <Typeahead
+        error={errorState}
+        label="Colors"
+        onChange={handleOnChange}
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadErrorState

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md

@@ -0,0 +1 @@
+Typeahead w/ Error shows that an option must be selected or the selected option is invalid (i.e., when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb

@@ -0,0 +1,36 @@
+<%
+  synths = [
+    { label: 'Oberheim', value: 'OBXa' },
+    { label: 'Moog', value: 'Minimoog' },
+    { label: 'Roland', value: 'Juno' },
+    { label: 'Korg', value: 'MS-20' },
+  ]
+%>
+<%
+  cities = [
+    { label: 'Budapest', value: 'Hungary' },
+    { label: 'Singapore', value: 'Singapore' },
+    { label: 'Oslo', value: 'Norway' },
+    { label: 'Lagos', value: 'Nigeria' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+  default_options: [synths.first],
+  id: "typeahead-inline-example1",
+  inline: true,
+  options: synths,
+  label: "Synths",
+  placeholder: "Add synths",
+  pills: true
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-inline-example2",
+  inline: true,
+  options: cities,
+  label: "Cities",
+  pills: true,
+  placeholder: "Add cities",
+  plus_icon: true
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx

@@ -0,0 +1,44 @@
+// @flow
+
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const synths = [
+  { label: 'Oberheim', value: 'OBXa' },
+  { label: 'Moog', value: 'Minimoog' },
+  { label: 'Roland', value: 'Juno' },
+  { label: 'Korg', value: 'MS-20' },
+]
+
+const cities = [
+  { label: 'Budapest', value: 'Hungary' },
+  { label: 'Singapore', value: 'Singapore' },
+  { label: 'Oslo', value: 'Norway' },
+  { label: 'Lagos', value: 'Nigeria' },
+]
+
+const TypeaheadInline = (props) => {
+  return (
+    <>
+      <Typeahead
+          inline
+          isMulti
+          label="Synths"
+          options={synths}
+          {...props}
+      />
+      <Typeahead
+          inline
+          isMulti
+          label="Placeholder Plus Icon"
+          options={cities}
+          placeholder="Add cities"
+          plusIcon
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadInline