playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/tokens/_transition.scss

@@ -0,0 +1 @@
+$transition_default: 0.3s;

data/app/pb_kits/playbook/tokens/{_typography.sass → _typography.scss}

@@ -62,3 +62,28 @@ $boldest:       800;
 $bolder:        700;
 $light:         300;
 $lighter:       100;
+
+
+
+:export {
+  font_family_base: $font_family_base;
+  text_jumbo: $text_jumbo;
+  text_largest: $text_largest;
+  text_larger: $text_larger;
+  text_large: $text_large;
+  text_base: $text_base;
+  text_default: $text_default;
+  text_normal: $text_normal;
+  text_medium: $text_medium;
+  text_small: $text_small;
+  text_smaller: $text_smaller;
+  text_smallest: $text_smallest;
+  heading_1: $heading_1;
+  heading_2: $heading_2;
+  heading_3: $heading_3;
+  heading_4: $heading_4;
+  lighter: $lighter;
+  light: $light;
+  bold: $bold;
+  regular: $regular;
+}

data/app/views/layouts/playbook/_nav.html.slim

@@ -1,3 +1,6 @@
 .pb--page--topNav
   h1
-    a href="#{root_path}" class="text-power-gold" Playbook
+    = link_to "Playbook", root_url
+    |  
+    = pb_rails("caption", props: { tag: "span", text: Playbook::VERSION })
+

data/app/views/layouts/playbook/_sidebar.html.slim

@@ -14,7 +14,7 @@ br
 
   - MENU["kits"].sort.each do |link|
     - active = !@kit.nil? && @kit == link ? true : false
-    = pb_rails("vertical_nav/item", props: { text: pb_title(link), link: kit_show_path(link), active: active })
+    = pb_rails("vertical_nav/item", props: { text: pb_kit_title(link), link: kit_show_path(link), active: active })
 
 br
 

data/app/views/layouts/playbook/application.html.slim

@@ -4,10 +4,8 @@ html
     title Playbook Design System
     = csrf_meta_tags
     = csp_meta_tag
-    = javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"
     = stylesheet_pack_tag 'main'
-    = javascript_pack_tag 'application'
-    = javascript_pack_tag 'examples'
+
   body
     = render 'layouts/playbook/nav'
     = pb_rails("layout", props: {full: true})
@@ -16,3 +14,9 @@ html
       = pb_rails("layout/body")
         .pb--page--content--main
           = yield
+
+  = javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"
+  = javascript_include_tag "https://code.highcharts.com/highcharts.js"
+  = javascript_pack_tag 'application'
+  = javascript_pack_tag 'examples'
+= yield :pb_js

data/app/views/playbook/pages/kit_show.html.slim

@@ -1,5 +1,5 @@
 .pb--kit-show
-  = pb_rails("title", props: { text: pb_title(@kit), tag: "h1", size: "1" })
+  = pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: "1" })
 
   .pb--kit-type-nav
     - if has_kit_type?(@kit, "rails")

data/app/views/playbook/pages/principals/_getting_started.html.md

@@ -3,10 +3,28 @@
 
 #### Commands to get you started.
 
-To watch for changes run:
+To spin up the app run:
 
-`./bin/webpack --watch --colors --progress`
+`make start`
 
-To spin up the app run:
 
-`bundle exec rails s`
+#### Yarn Problems
+
+If you get an error simular to this:
+
+
+> ERROR in .scss
+  Module build failed
+  ModuleBuildError: Module build failed sass-loader
+  Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 8.x
+  Found bindings for the following environments:
+  OS X 64-bit with Node.js 8.x
+  This usually happens because your environment has changed since running npm install.
+  Run npm rebuild node-sass to download the binding for your current environment.
+
+
+First try:
+
+`make shell && npm rebuild node-sass`
+
+If that still doesn't work try to delete the node-sass folder and `yarn install`

data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim

@@ -2,7 +2,8 @@ br
 = pb_rails("title", props: { text: title, tag: "h4", size: "4" })
 
 - if defined?(usage) && usage.present?
-  = pb_rails("body", props: {"tag": "p", "text": usage})
+  = pb_rails("body", props: {"tag": "p"})
+    usage
 
 br
 ul.pb--tokens-spacing

data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim

@@ -2,7 +2,8 @@
 br
 = pb_rails("title", props: { text: title, tag: "h4", size: "4" })
 - if defined?(usage) && usage.present?
-  = pb_rails("body", props: {"tag": "p", "text": usage})
+  = pb_rails("body", props: {"tag": "p"})
+    usage
 
 ul.pb--utlities-color
   - colors.each do |item|

data/lib/generators/kit/USAGE

@@ -1,32 +1,5 @@
 Description:
-    Create kit in the pb_kits folder
+    Create a new Playbook kit
 
 Example:
-    rails g kit button
-//////////////
-
-    This will create:
-        app/pb_kits/pb_button/_button_story_rails.html.erb
-        app/pb_kits/pb_button/_button_story_react.html.erb
-        app/pb_kits/pb_button/_button.html.erb
-        app/pb_kits/pb_button/_button.scss
-        app/pb_kits/pb_button/_button.md
-        app/pb_kits/pb_button/_button.jsx
-
-        app/pb_kits/packs/pb_button.js
-
-/////////////
-
-    Add: @import "../../pb_button/button";
-
-    To the file: app/pb_kits/packs/site_styles/_kit_style_index.scss
-
-/////////////
-
-/////////////
-
-    Add: - button
-
-    To the file: app/config/data/menu.yml
-
-/////////////
+    rails g kit "button"

data/lib/generators/kit/kit_generator.rb

@@ -1,86 +1,93 @@
-# the generator extends from NamedBase base class which makes sure
-# alleast a name must be provided to the generator
+# frozen_string_literal: true
 
 class KitGenerator < Rails::Generators::NamedBase
-
-  source_root File.expand_path("../templates/", __FILE__)
-
+  desc "This generator creates a new Playbook Kit"
+  source_root File.expand_path("templates", __dir__)
+  class_option :props, type: :array, default: []
 
   def create_templates
+    kit_name = name.strip.downcase
+    @kit_name_uppercase = kit_name.upcase
+    @kit_name_lowercase = kit_name
+    @kit_name_capitalize = kit_name.capitalize
+    @kit_name_underscore = kit_name.parameterize.underscore
+    @kit_name_pascal = kit_name.titleize.gsub(/\s+/, "")
+
+    kit_props = options[:props].concat(%w[id:string classname:string data:object])
+    @kit_props = kit_props.map { |hash| [hash.partition(":").first, hash.partition(":").last] }.to_h
+    @kit_props = @kit_props.sort.to_h
+    @unique_props = @kit_props.symbolize_keys.without(:id, :classname, :data)
+
+    @kit_class_init = []
+    @kit_props.each do |key, _val|
+      @kit_class_init.push("#{key.parameterize.underscore}: default_configuration".to_sym)
+    end
 
-      @name = name
-      @exists = nil
+    @kit_class_val = []
+    @kit_props.each do |key, _value|
+      @kit_class_val.push("self.configured_#{key.parameterize.underscore} = #{key.parameterize.underscore}")
+    end
 
-      f = File.open("config/data/menu.yml", "r")
-        f.each_line do |line|
-          if line.include? "  - pb_#{@name}"
-            puts "This kit exists"
-            @exists = true
-          else
-            @exists = false
+    # Check if kit already exists =======================
+    if File.directory?("app/pb_kits/playbook/pb_#{@kit_name_underscore}")
+      say_status  "#{@kit_name_capitalize} kit already exists.",
+                  "Please choose another name or manually make changes to the existing kit.",
+                  :red
+      return
+    else
+      # Add kit to Playbook meu ==========================
+      open("config/data/menu.yml", "a") do |f|
+        f.puts "  - #{@kit_name_underscore}"
+      end
+      say_status  "complete",
+                  "#{@kit_name_capitalize} kit added to Playbook menu.",
+                  :green
+
+      # Generate SCSS files ==============================
+      template "kit_scss.erb", "app/pb_kits/playbook/pb_#{@kit_name_underscore}/_#{@kit_name_underscore}.scss"
+      open("app/pb_kits/playbook/packs/site_styles/_kit_style_index.scss", "a") do |f|
+        f.puts "@" + "import " + "\'" + "../../pb_#{@kit_name_underscore}/#{@kit_name_underscore}" + "\';"
+      end
+      say_status  "complete",
+                  "#{@kit_name_capitalize} kit stylesheet successfully created and imported.",
+                  :green
+
+      # Ask user if Rails version should be generated ======
+      if yes?("Create RAILS #{@kit_name_underscore} kit? (y/N)")
+        @rails_kit = true
+        template "kit_ruby.erb", "app/pb_kits/playbook/pb_#{@kit_name_underscore}/#{@kit_name_underscore}.rb"
+        template "kit_html.erb", "app/pb_kits/playbook/pb_#{@kit_name_underscore}/_#{@kit_name_underscore}.html.erb"
+        template "kit_example_rails.erb", "app/pb_kits/playbook/pb_#{@kit_name_underscore}/docs/_#{@kit_name_underscore}_default.html.erb"
+        say_status  "complete",
+                    "#{@kit_name_capitalize} rails kit successfully created.",
+                    :green
+      end
 
-          end
+      # Ask user if React version should be generated ======
+      if yes?("Create REACT #{@kit_name_pascal} kit? (y/N)")
+        @react_kit = true
+        template "kit_jsx.erb", "app/pb_kits/playbook/pb_#{@kit_name_underscore}/_#{@kit_name_underscore}.jsx"
+        template "kit_example_react.erb", "app/pb_kits/playbook/pb_#{@kit_name_underscore}/docs/_#{@kit_name_underscore}_default.jsx"
+        template "kit_js.erb", "app/pb_kits/playbook/pb_#{@kit_name_underscore}/docs/index.js"
+        template "kit_pack.erb", "app/pb_kits/playbook/packs/pb_#{@kit_name_underscore}.js"
+
+        # Import in all kits.js  =========================
+        append_to_file("app/pb_kits/playbook/packs/kits.js") do
+          "import \"./pb_#{@kit_name_underscore}.js\";\n"
         end
-      f.close
 
-      if @exists == false
-        puts "Creating Kit.../"
-
-        template "javascript.erb",  "app/pb_kits/playbook/packs/pb_#{@name}.js"
-        template "scss.erb",        "app/pb_kits/playbook/pb_#{@name}/_#{@name}.scss"
-        template "jsx.erb",         "app/pb_kits/playbook/pb_#{@name}/_#{@name}.jsx"
-        template "html.erb",        "app/pb_kits/playbook/pb_#{@name}/_#{@name}.html.erb"
-        template "ruby.erb",        "app/pb_kits/playbook/pb_#{@name}/#{@name}.rb"
-        template "storyrails.erb",  "app/pb_kits/playbook/pb_#{@name}/docs/_rails.html.erb"
-        template "storyreact.erb",  "app/pb_kits/playbook/pb_#{@name}/docs/_react.html.erb"
-
-        # Add kit to styles scss
-        open('app/pb_kits/playbook/packs/site_styles/_kit_style_index.scss', 'a') { |f|
-          f.puts "@"+ "import "+ "\'" +"../../pb_#{@name}/#{@name}"+"\';"
-        }
-
-        # Add to kit to YAML file
-        open('config/data/menu.yml', 'a') { |f|
-          f.puts "  - #{@name}"
-        }
-
-        # Add kit pack file to application js
-        inject_into_file('app/pb_kits/playbook/packs/application.js', :before => "// END PACKS") do
-          "import \"./pb_#{@name}.js\";\n"
+        # Import kit examples  ===========================
+        append_to_file("app/pb_kits/playbook/packs/examples.js") do
+          "\nimport * as #{@kit_name_pascal} from \"pb_#{@kit_name_underscore}/docs\";\nWebpackerReact.setup (#{@kit_name_pascal});\n"
         end
 
-        # Recode this
-        # f = File.open("lib/generators/kit/templates/logo.txt", "r")
-        #   f.each_line do |line|
-        #     puts line
-        #   end
-        # f.close
+        say_status  "complete",
+                    "#{@kit_name_capitalize} react kit successfully created.",
+                    :green
       end
 
-  end
-
-
-
-
-  private
-
-    def parts
-      name.split('/')
-    end
-
-    def js_titleize_file_name
-      name = ""
-      parts.each do |part|
-        name += part.titleize
-      end
-      name
-    end
-
-    def javascript_pack_tag_snippet
-      "<%= javascript_pack_tag '#{name}' %>"
-    end
-
-    def stylesheet_pack_tag_snippet
-      "<%= stylesheet_pack_tag '#{name}' %>"
+      # Create kit example.yml
+      template "kit_example_yml.erb", "app/pb_kits/playbook/pb_#{@kit_name_underscore}/docs/example.yml"
     end
+  end
 end

data/lib/generators/kit/templates/kit_example_rails.erb.tt

@@ -0,0 +1 @@
+<%%= pb_rails("<%= @kit_name_underscore %>") %>

data/lib/generators/kit/templates/kit_example_react.erb.tt

@@ -0,0 +1,12 @@
+import React from "react"
+import <%= @kit_name_pascal %> from "../_<%= @kit_name_underscore %>.jsx"
+
+function <%= @kit_name_pascal %>Default() {
+  return (
+    <div>
+      <<%= @kit_name_pascal %> />
+    </div>
+  )
+}
+
+export default <%= @kit_name_pascal %>Default;

data/lib/generators/kit/templates/kit_example_yml.erb.tt

@@ -0,0 +1,9 @@
+examples:
+  <% if @rails_kit %>
+  rails:
+  - <%= @kit_name_underscore %>_default: Default
+  <% end %>
+  <% if @react_kit %>
+  react:
+  - <%= @kit_name_underscore %>_default: Default
+  <% end %>

data/lib/generators/kit/templates/kit_html.erb.tt

@@ -0,0 +1,6 @@
+<%%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("pb_<%= @kit_name_underscore %>")) do %>
+  <span><%= @kit_name_uppercase %> CONTENT</span>
+<%% end %>

data/lib/generators/kit/templates/kit_js.erb.tt

@@ -0,0 +1 @@
+export {default as <%= @kit_name_pascal %>Default} from './_<%= @kit_name_underscore %>_default.jsx';

data/lib/generators/kit/templates/kit_jsx.erb.tt

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string
+};
+
+class <%= @kit_name_pascal %> extends React.Component {
+  render() {
+    return (
+      <div className="pb_<%= @kit_name_underscore %>">
+        <span><%= @kit_name_uppercase %> CONTENT</span>
+      </div>
+    )
+  }
+}
+
+<%= @kit_name_pascal %>.propTypes = propTypes;
+
+export default <%= @kit_name_pascal %>;

data/lib/generators/kit/templates/kit_pack.erb.tt

@@ -0,0 +1,4 @@
+import <%= @kit_name_pascal %> from "pb_<%= @kit_name_underscore %>/_<%= @kit_name_underscore %>.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ <%= @kit_name_pascal %> });

data/lib/generators/kit/templates/kit_ruby.erb.tt

@@ -0,0 +1,32 @@
+module Playbook
+  module Pb<%= @kit_name_pascal %>
+    class <%= @kit_name_pascal %> < Playbook::PbKit::Base
+      PROPS = [<%= @kit_props.map{|key,val| ":configured_#{key.parameterize.underscore}".to_sym }.join(",\n\t\t\t\t\t") %>].freeze
+
+      def initialize(<%= @kit_class_init.join(",\n\t\t\t\t\t\t\t") %>)
+        <%= @kit_class_val.join("\n\t\t\t\t") %>
+      end
+      <% @unique_props.each do |key, val| %>
+      def <%= key.to_s.underscore %><% case val %><% when "array", "arr" %>
+        <%= key.to_s.underscore %>_options = %w(option1 option2)
+        one_of_value(configured_<%= key.to_s.underscore %>, <%= key.to_s.underscore %>_options, "")<% when "boolean", "bool" %>
+        true_value(configured_<%= key.to_s.underscore %>, "true value", "false value")<% else %>
+        default_value(configured_<%= key.to_s.underscore %>, "")<% end %>
+      end
+      <% end %>
+
+      def to_partial_path
+        "<%= "pb_#{@kit_name_underscore}/#{@kit_name_underscore}" %>"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/lib/generators/kit/templates/kit_scss.erb

@@ -0,0 +1,3 @@
+<%= ".pb_#{@kit_name_underscore}" %> {
+
+}

data/lib/playbook.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require "sassc-rails"
 require "webpacker"
 require "playbook/engine"