playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

data/app/pb_kits/playbook/pb_docs/kit_api.rb

@@ -1,149 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDocs
-    class KitApi < Playbook::KitBase
-      prop :kit, type: Playbook::Props::String, required: true
-
-      def kit_local_props
-        local = []
-        kit_props.each do |key, value|
-          value.kit != Playbook::KitBase && local.push({ key: key, value: value })
-        end
-        local
-      end
-
-      def padding_margin_values
-        %w[none xxs xs sm md lg xl]
-      end
-
-      def local_prop_data
-        local_props = {}
-
-        kit_local_props.each do |key, _value|
-          name = key[:value].instance_variable_get(:@name)
-          type = key[:value].class.to_s.split("::").last
-          default = key[:value].instance_variable_get(:@default)
-          values = key[:value].instance_variable_get(:@values)
-          local_props[name.to_sym] = { "type": type, "default": default, "values": values }
-        end
-        local_props
-      end
-
-      def kit_global_props
-        global_props = {}
-        global_prop_names = []
-        global_prop_values = {}
-        global_props_with_values = {}
-        global_props_without_values = []
-        parent_child_object = {}
-        updated_global_props_with_values = {}
-
-        # extracts the modules from kit_base.rb, which is where we import all the global props that we inject into every rails kit
-        pb_module = Playbook::KitBase.included_modules.select { |mod| mod.to_s.include?("Playbook::") }
-
-        # loops through the kits and extracts each prop with its values and pushes that to the global_props hash
-        kit_props.each do |key, value|
-          value.kit == Playbook::KitBase && global_props[key.to_sym] = value
-        end
-
-        # loops through the global_props and extracts the name of each prop and pushes that to global_prop_names array
-        global_props.each do |name, _values|
-          global_prop_names.push(name)
-        end
-
-        # Loops through each module in pb_module and searches for methods that end in _values, as these methods hold the values for each prop
-        # we then save the values and type and push that to the values hash as a key value pair
-        pb_module.each do |mod|
-          mod.instance_methods.each do |method_name|
-            next unless method_name.to_s.end_with?("_values")
-
-            value = send(method_name)
-            type = value.class
-            global_prop_values[method_name.to_s.chomp("_values").to_sym] = { "type": type, "values": value }
-          end
-        end
-
-        # loops through the global_prop_names array
-        # then loops through the global_prop_values hash and extracts the values that have the same name found in global_prop_names
-        # this loop helps ensure only global props values are actually extracted, as there could be other methods that end in _values in the modules we are iterating over
-        # these verified global props with values are then pushed to the global_props_with_values hash
-        global_prop_names.each do |name, _prop|
-          global_prop_values.each do |key, value|
-            global_props_with_values[key] = value if key == name
-          end
-        end
-
-        # now we grab all the global_prop_names that do not have a matching key in global_prop_values.
-        # This gives us any global prop that did not have any predefined value. like classname and dark
-        global_props_without_values = global_prop_names - global_prop_values.keys
-
-        # Loops through each module in pb_module and searches for methods that end in _options, as these methods hold all the props in the module
-        # save the prop names prop values and  and parent module name to parent_child_object hash
-        # this is a comprehensive list of all parent module and children props for edge cases like spacing.rb, that is not named after the props it represents
-        pb_module.each do |mod|
-          mod.instance_methods.each do |method_name|
-            next unless method_name.to_s.end_with?("_options")
-
-            props = send(method_name)
-            parent = mod.to_s.split("::").last
-            values = send("#{parent.underscore}_values")
-            parent_child_object[parent] = { "props": props, "values": values }
-          end
-        end
-
-        # loops through each object in parent_child_object and extracts its children (props and values)
-        # loops through each child and extracts the individual props
-        # Checks if the props match any of the props in global_props_without_values
-        # if it does, then we push that prop to global_props_with_values hash
-        # This extracts the props in the spacing.rb file and any file that is not named after the props it represents
-        parent_child_object.each do |_parent, children|
-          children.each do |_child, props|
-            props.each do |prop, _value|
-              type = children[:values].class
-              values = children[:values]
-              global_props_with_values[prop] = { "type": type, "values": values } if global_props_without_values.include?(prop)
-            end
-          end
-        end
-
-        # loop through the global_props hash and the global_props_with_values hash.
-        # extract the props from global_props that are not found in global_props_with_values into updated_global_props_with_values
-        # This is the last piece that grabs the global props that did not have values at all, like classname and dark, and adds it to our hash
-        global_props.each do |prop, value|
-          unless global_props_with_values.include?(prop)
-            type = value.class.to_s.split("::").last
-            updated_global_props_with_values[prop] = { "type": type }
-          end
-        end
-
-        # Merge updated_global_props_with_values into global_props_with_values
-        # global_props_with_values will now hold all the global props thier values and type
-        global_props_with_values.merge!(updated_global_props_with_values)
-
-        global_props_with_values
-      end
-
-      def global_prop_data
-        global_props = {}
-
-        kit_global_props.each do |key, value|
-          type = value[:type]
-          values = value[:values]
-          global_props[key] = { "type": type, "values": values }
-        end
-        global_props
-      end
-
-      def kit_props
-        kit_class.props
-      end
-
-    private
-
-      def kit_class
-        @kit_class ||= Playbook::KitResolver.resolve(kit.to_s)
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -1,45 +0,0 @@
-<% example_html = ERB.new(example).result %>
-
-<%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
-  <div class="pb--kit-example">
-    <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
-    <br />
-    <%= example %>
-    <br>
-  </div>
-
-  <% if show_code %>
-    <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
-      <%= render_markdown(description) %>
-    </div>
-    <div id="code-wrapper">
-      <div class="pb--codeControls">
-        <ul>
-          <% if type == "rails" %>
-            <li>
-              <a href="#" id="copy-<%= example_key %>-trigger" onclick="copyOnClick(`<%= example_html %>`, `copy-<%= example_key %>`)">
-                Copy HTML
-              </a>
-            </li>
-          <% end %>
-          <li>
-            <a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
-          </li>
-        </ul>
-      </div>
-      <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
-        <%= pb_rails("section_separator", props: { dark: dark })%>
-        <a href="#" id="toggle-close" data-toggle="false" class="pb--close-toggle">Close</a>
-        <pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
-      </div>
-    </div>
-  <% end %>
-<% end %>
-
-<script>
-  function copyOnClick(content, elementID) {
-    copyContent(content)
-  }
-  
-</script>
-   

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -1,71 +0,0 @@
-# frozen_string_literal: true
-
-# rubocop:disable Style/CaseLikeIf
-
-module Playbook
-  module PbDocs
-    class KitExample < Playbook::KitBase
-      include Playbook::Markdown::Helper
-
-      prop :kit, type: Playbook::Props::String, required: true
-      prop :example_title, type: Playbook::Props::String, required: true
-      prop :example_key, type: Playbook::Props::String, required: true
-      prop :show_code, type: Playbook::Props::Boolean, default: true
-      prop :type, type: Playbook::Props::Enum, values: %w[rails react], default: "rails"
-      prop :dark, type: Playbook::Props::Boolean, default: false
-
-      def example
-        if type == "rails"
-          render inline: source
-        elsif type == "react"
-          react_component example_key.camelize, { dark: dark }
-        end
-      end
-
-      def description
-        @description ||= read_kit_file("docs", "_#{example_key}.md")
-      end
-
-      def highlighter
-        type.eql?("rails") ? "erb" : "react"
-      end
-
-      def source
-        @source ||= begin
-          extension = type == "react" ? "jsx" : "html.erb"
-          stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
-          sanitize_code(stringified_code)
-        end
-      end
-
-      def tsx_source
-        read_kit_file("", "_#{example_key}.tsx")
-      end
-
-    private
-
-      def sanitize_code(stringified_code)
-        stringified_code = stringified_code.gsub('"../.."', '"playbook-ui"')
-                                           .gsub('"../../"', '"playbook-ui"')
-                                           .gsub("'../../'", "'playbook-ui'")
-                                           .gsub("'../..'", "'playbook-ui'")
-                                           .gsub(%r{from "../.*}, "from 'playbook-ui'")
-                                           .gsub(%r{from '../.*}, "from 'playbook-ui'")
-        stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
-        if stringified_code.include?("props: { ")
-          stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark
-        elsif type == "rails" && dark
-          stringified_code = stringified_code.gsub("props: {", "props: {\n    dark: true,")
-        end
-        stringified_code.gsub(" {...props}", "")
-      end
-
-      def read_kit_file(folder, *args)
-        path = ::Playbook.kit_path(kit, folder, *args)
-        path.exist? ? path.read : ""
-      end
-    end
-  end
-end
-
-# rubocop:enable Style/CaseLikeIf

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

@@ -1,7 +0,0 @@
-This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
-
-### Props
-
-`accept: [String]` Use this prop to set the list of valid file types
-`customMessage: [String]` Use this prop to set a custom message, replacing the default text
-`onFilesAccepted: Function` The callback function, providing the list of dropped files

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -1,40 +0,0 @@
-/* @flow */
-
-import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from '../..'
-
-const AcceptedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}>{file.name}</ListItem>
-    ))}
-  </List>
-)
-
-const FileUploadAccept = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-
-  const handleOnFilesAccepted = (files) => {
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <FileUpload
-          accept={['image/svg+xml']}
-          onFilesAccepted={handleOnFilesAccepted}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default FileUploadAccept

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -1,38 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-/* @flow */
-
-import React, { useState } from "react";
-import { FileUpload, List, ListItem } from "../..";
-
-const AcceptedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}>{file.name}</ListItem>
-    ))}
-  </List>
-);
-
-const FileUploadCustomDescription = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([]);
-
-  const handleOnFilesAccepted = (files) => {
-    setFilesToUpload([...filesToUpload, ...files]);
-  };
-
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <FileUpload
-          accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
-          acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
-          onFilesAccepted={handleOnFilesAccepted}
-          {...props}
-      />
-    </div>
-  );
-};
-
-export default FileUploadCustomDescription;

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md

@@ -1 +0,0 @@
-Sometimes you may want to create a custom description that is easier for users to read. In this case, you can use the `acceptedFilesDescription` prop.

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx

@@ -1,40 +0,0 @@
-/* @flow */
-
-import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from '../..'
-
-const AcceptedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}>{file.name}</ListItem>
-    ))}
-  </List>
-)
-
-const FileUploadCustomMessage = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-
-  const handleOnFilesAccepted = (files) => {
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <FileUpload
-          customMessage="Playbook is awesome!"
-          onFilesAccepted={handleOnFilesAccepted}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default FileUploadCustomMessage

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx

@@ -1,39 +0,0 @@
-/* @flow */
-
-import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from '../..'
-
-const AcceptedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}>{file.name}</ListItem>
-    ))}
-  </List>
-)
-
-const FileUploadDefault = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-
-  const handleOnFilesAccepted = (files) => {
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <FileUpload
-          onFilesAccepted={handleOnFilesAccepted}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default FileUploadDefault

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -1,71 +0,0 @@
-/* @flow */
-/* eslint-disable react/no-multi-comp */
-
-import React, { useState } from 'react'
-import {
-  Body,
-  FileUpload,
-  List,
-  ListItem,
-} from '../..'
-
-const AcceptedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}>{file.name}</ListItem>
-    ))}
-  </List>
-)
-const RejectedFilesList = ({ files }: FileList) => (
-  <List>
-    {files.map((file) => (
-      <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
-    ))}
-  </List>
-)
-
-const FileUploadMaxSize = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-  const [filesRejected, setFilesRejected] = useState([])
-  const [error, setError] = useState()
-
-  const handleOnFilesAccepted = (files) => {
-    if (files.length) setError()
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-
-  const handleOnFilesRejected = (error, files) => {
-    setError(error)
-    setFilesRejected([...filesRejected, ...files])
-  }
-
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <RejectedFilesList
-          files={filesRejected}
-          {...props}
-      />
-      <FileUpload
-          acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
-          maxSize={1000000}
-          onFilesAccepted={handleOnFilesAccepted}
-          onFilesRejected={handleOnFilesRejected}
-          {...props}
-      />
-      { error && (
-        <Body
-            color="error"
-            marginY="md"
-        >
-          {error}
-        </Body>
-      )}
-    </div>
-  )
-}
-
-export default FileUploadMaxSize

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

@@ -1,10 +0,0 @@
-examples:
-
-  rails:
-
-  react:
-  - file_upload_default: Default List of files to upload
-  - file_upload_accept: Accept only certain types of files
-  - file_upload_custom_message: Add a custom message
-  - file_upload_custom_description: Add your one accepted files description
-  - file_upload_max_size: Set a file size limit

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

@@ -1,5 +0,0 @@
-export { default as FileUploadDefault } from './_file_upload_default.jsx'
-export { default as FileUploadAccept } from './_file_upload_accept.jsx'
-export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
-export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
-export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'

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

@@ -1,7 +0,0 @@
-This kit can be implemented in a variety of ways.
-To see examples of how to implement this kit in production visit the **/dev_docs/search** page in production.
-
-**Note**
-All React examples are wrapped in a <code>{closePopover}</code> method to ensure the popover closes on click of "Apply".
-
-The `min_width` prop for the popover inside of filter is used in all the examples and is set to 360px. That is the `min_width` prop we recommend using as it is the same pixel value as our `max_width` `sm` global prop.

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -1,71 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "1",
-    margin_bottom: "xl",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-  }) do
-%>
-  <%
-    example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-    <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>
-
-
-<%=
-  pb_rails("filter", props: {
-    min_width: "360px",
-    id: "def2",
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 0,
-  }) do
-%>
-  <%
-    example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-    <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>