playbook_ui 7.1.0.pre.alpha1 → 7.1.0.pre.alpha2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a644ad03dc97f41965fc81a6eb5bbff2aa79a546b50bc6fb6bac8f08eef363d1
-  data.tar.gz: 0fe1ca166f29f9f46a805d29744dfe5d385ba04d6eadc77773416b2d374ae99d
+  metadata.gz: 9d793fb38923075c62383c618585aebba3516a5573d81ed4a7b7da05bc6ec0e1
+  data.tar.gz: 4918ac3b820aedf79c9873f6efcceebf0c555879aefb97ce649c1329af089b43
 SHA512:
-  metadata.gz: f03035f54a4e33a6d87e3a011a56890ba0a1fc8f1e90f737e0735bdc3d301603b4de296dd43371870a07f0ad27628d3a3f82f9de7ae6ee9dc2689203a1ef6896
-  data.tar.gz: 80322b2825772cce53dfb4065d2dac261f9072aaec897d048d98b28ca2567de356c834b8fed975c66282168e0d3037ebd36665b7e4870f0314e95e19434e6833
+  metadata.gz: efc9b1216f6970e79c45d992a67c481af899364ab851acf3953d6cf9b5152d69648f562c1086dc8c0fb4b2b20f1249a7a3b5d543d9d495b70d977c49b85caa8a
+  data.tar.gz: 9c0d61bc682f99cb0d49265a33aa79d736905d3e62798456e99d2f540f03875d39d788746be370fd8fec7d6a917cec615ccca1b1de17d9e30f5ba58845097efa

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

data/app/pb_kits/playbook/pb_body/body.rb

@@ -5,7 +5,7 @@ module Playbook
     class Body
       include Playbook::Props
       include ActionView::Helpers
-      
+
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_caption/_caption.html.erb

@@ -1,5 +1,7 @@
-<%= content_tag(object.tag, object.text,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria) %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <%= object.children.present? ? capture(&object.children) : object.text %>
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("caption") do %>
+  Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'lg' }) do %>
+  Large Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'xs' }) do %>
+  Subcaption Block
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionBlock = (props) => {
+  return (
+    <div>
+      <Caption {...props}>
+        {'Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="lg"
+      >
+        {'Large Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="xs"
+      >
+        {'Subcaption Block'}
+      </Caption>
+    </div>
+  )
+}
+
+export default CaptionBlock

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

@@ -1,5 +1,7 @@
 examples:
   rails:
   - caption_light: Default
+  - caption_block: Block
   react:
   - caption_light: Default
+  - caption_block: Block

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

@@ -1,2 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
 export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionBlock } from './_caption_block.jsx'

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

data/app/pb_kits/playbook/pb_time/_time.html.erb

@@ -2,39 +2,36 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%
-      # convert deprecated prop values
-      size = object.size
-      size = "sm" if object.size == "xs"
-      size = "md" if object.size == "lg"
-    %>
+  <%
+    # convert deprecated prop values
+    size = object.size
+    size = "sm" if object.size == "xs"
+    size = "md" if object.size == "lg"
+  %>
   <% if size == "md" %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "lg" }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-    <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
+    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
     <% if object.show_timezone %>
-      <%= content_tag(:span, class: "pb_time_timezone") do %>
-        <%= object.pb_date_time.to_timezone.upcase %>
-      <% end %>
+      <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
     <% end %>
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
-    <%= pb_rails("body", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
+    
+    <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
       <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= content_tag(:span) do %>
-          <%= object.format_time_string %>
-          <% if object.show_timezone %>
-            <%= content_tag(:span, class: "pb_time_timezone") do %>
-              <%= object.pb_date_time.to_timezone.upcase %>
-            <% end %>
-          <% end %>
+        <%= object.format_time_string %>
+        <% if object.show_timezone %>
+          <span class="pb_time_timezone">
+            <%= object.pb_date_time.to_timezone.upcase %>
+          </span>
         <% end %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -18,11 +18,12 @@ type TimeProps = {
   id?: string,
   showIcon?: boolean,
   size?: 'md' | 'sm',
+  showTimezone?: boolean,
   timeZone?: string,
 }
 
 const Time = (props: TimeProps) => {
-  const { align, className, date, showIcon, size, timeZone } = props
+  const { align, className, date, showIcon, size, timeZone, showTimezone = true } = props
   const classes = classnames(
     buildCss('pb_time_kit', align, size),
     globalProps(props),
@@ -33,41 +34,53 @@ const Time = (props: TimeProps) => {
 
   return (
     <div className={classes}>
-      <span className="pb_body_kit">
-        <If condition={showIcon}>
-          <Body
-              color="light"
-              tag="span"
-          >
-            <Icon
-                fixedWidth
-                icon="clock"
-                size={size === 'md' ? 'lg' : 'sm'}
+      <If condition={showIcon}>
+        <Body
+            color="light"
+            tag="span"
+        >
+          <Icon
+              fixedWidth
+              icon="clock"
+              size={size === 'md' ? '' : 'sm'}
+          />
+        </Body>
+        {' '}
+      </If>
+
+      <time dateTime={date}>
+        <span>
+          <If condition={size === 'md'}>
+            <Body
+                className="pb_time"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
             />
-          </Body>
-          {' '}
-        </If>
-        <time dateTime={date}>
-          <span>
-            <If condition={size !== 'md'}>
+            {' '}
+            <If condition={showTimezone}>
               <Body
                   color="light"
                   tag="span"
-                  text={dateTimestamp.toTimeWithMeridian()}
+                  text={dateTimestamp.toTimezone()}
               />
-              <Else />
+            </If>
+            <Else />
+            <Caption
+                color="light"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+            />
+            {' '}
+            <If condition={showTimezone}>
               <Caption
-                  size="lg"
+                  color="light"
                   tag="span"
-                  text={dateTimestamp.toTimeWithMeridian()}
+                  text={dateTimestamp.toTimezone()}
               />
             </If>
-            <If condition={timeZone !== undefined}>
-              <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span>
-            </If>
-          </span>
-        </time>
-      </span>
+          </If>
+        </span>
+      </time>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -5,8 +5,6 @@
 @import "../pb_caption/caption";
 
 [class^=pb_time_kit] {
-  letter-spacing: $lspace_looser;
-  text-transform: uppercase;
   &[class*=_center]  {
     text-align: center;
   }
@@ -15,10 +13,6 @@
     text-align: right;
   }
 
-  [class^=pb_body] {
-    font-weight: $bold !important;
-  }
-
   [class^=pb_time_timezone] {
     color: $text_lt_light;
     font-weight: $bold;
@@ -28,26 +22,12 @@
     }
   }
 
-  &[class*=_md] {
-    [class^=pb_caption_kit] {
-      color: $text_lt_default;
-      letter-spacing: $lspace_tight;
-      text-transform: capitalize;
-    }
-    [class^=pb_time_timezone] {
-      color: $text_lt_light;
-      font-size: $font-large !important;
-      font-weight: $regular;
-      letter-spacing: $lspace_tight;
+  &[class*=dark] {
+    & * {
+      @include caption_dark;
     }
-  }
-
-  &.dark {
-    [class^=pb_caption_kit] {
+    .pb_time {
       color: $text_dk_default;
     }
-    [class^=pb_body_kit] {
-      color: $text_dk_light;
-    }
   }
 }

data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx

@@ -1,24 +1,27 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeAlign = () => {
+const TimeAlign = (props) => {
   return (
     <div>
       <Time
           date={new Date()}
           size="md"
+          {...props}
       />
       <br />
       <Time
           align="center"
           date={new Date()}
           size="md"
+          {...props}
       />
       <br />
       <Time
           align="right"
           date={new Date()}
           size="md"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb

@@ -1,38 +1,38 @@
 <%= pb_rails("time", props: {
   show_timezone: false,
-  time: Time.now,
+  time: Time.now
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
   time: DateTime.now,
-  timezone: "America/Chicago"
+  timezone: "America/New_York"
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  time: "2012-08-02T15:49:29Z",
   show_icon: true,
   show_timezone: false,
+  time: "2012-08-02T15:49:29Z",
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  time: "2012-08-02T15:49:29Z",
   show_icon: true,
-  timezone: "America/Chicago"
+  time: "2012-08-02T15:49:29Z",
+  timezone: "America/New_York"
 }) %>
 
- <br>
- <br>
+<br>
+<br>
 
- <%= pb_rails("time", props: {
-  time: Time.now,
-  size: "md",
+<%= pb_rails("time", props: {
   show_timezone: false,
+  size: "md",
+  time: Time.now,
 }) %>
 
 <br>
@@ -47,8 +47,8 @@
 
 <%= pb_rails("time", props: {
   show_icon: true,
-  size: "md",
   show_timezone: false,
+  size: "md",
   time: "2012-08-02T15:49:29Z",
 }) %>
 

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

@@ -1,45 +1,56 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeDefault = () => {
+const TimeDefault = (props) => {
   return (
     <div>
       <Time
           date={new Date().getTime()}
+          showTimezone={false}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <Time
           date={new Date().getTime()}
           showIcon
+          showTimezone={false}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           showIcon
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <br />
       <Time
           date={new Date()}
+          showTimezone={false}
           size="md"
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           size="md"
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           showIcon
+          showTimezone={false}
           size="md"
+          {...props}
       />
       <br />
       <Time
@@ -47,6 +58,7 @@ const TimeDefault = () => {
           showIcon
           size="md"
           timeZone="America/New_York"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx

@@ -1,16 +1,19 @@
 import React, { Fragment } from 'react'
 import Time from '../_time.jsx'
 
-const TimeSizes = () => {
+const TimeSizes = (props) => {
   return (
     <Fragment>
       <Time
           date={new Date()}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           size="md"
+          timeZone="America/New_York"
+          {...props}
       />
     </Fragment>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeStamp = () => {
+const TimeStamp = (props) => {
   return (
     <div>
       <Time
           date={new Date()}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -14,6 +15,7 @@ const TimeStamp = () => {
       <Time
           date={new Date().getTime()}
           size="sm"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeTimeZone = () => {
+const TimeTimezone = (props) => {
   const zones = {
     east: 'America/New_York',
     central: 'America/Chicago',
@@ -16,6 +16,7 @@ const TimeTimeZone = () => {
           date={new Date()}
           size="md"
           timeZone={zones.east}
+          {...props}
       />
 
       <br />
@@ -24,6 +25,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.central}
+          {...props}
       />
 
       <br />
@@ -32,6 +34,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.mountain}
+          {...props}
       />
 
       <br />
@@ -40,6 +43,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.west}
+          {...props}
       />
 
       <br />
@@ -48,10 +52,11 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.asia}
+          {...props}
       />
 
     </div>
   )
 }
 
-export default TimeTimeZone
+export default TimeTimezone

data/lib/generators/kit/USAGE

@@ -0,0 +1,5 @@
+Description:
+    Create a new Playbook kit
+
+Example:
+    rails g kit "button"

data/lib/generators/kit/kit_generator.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+class KitGenerator < Rails::Generators::NamedBase
+  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 aria: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, :aria)
+
+    @kit_class_init = []
+    @kit_props.each do |key, _val|
+      @kit_class_init.push("#{key.parameterize.underscore}: default_configuration".to_sym)
+    end
+
+    @kit_class_val = []
+    @kit_props.each do |key, _value|
+      @kit_class_val.push("self.configured_#{key.parameterize.underscore} = #{key.parameterize.underscore}")
+    end
+
+    full_kit_directory = "app/pb_kits/playbook/pb_#{@kit_name_underscore}"
+
+    # Check if kit already exists =======================
+    if File.directory?(full_kit_directory)
+      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 menu ==========================
+      open("app/pb_kits/playbook/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", "#{full_kit_directory}/_#{@kit_name_underscore}.scss"
+      open("app/pb_kits/playbook/_playbook.scss", "a") do |f|
+        f.puts "\n@" + "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", "#{full_kit_directory}/#{@kit_name_underscore}.rb"
+        template "kit_html.erb", "#{full_kit_directory}/_#{@kit_name_underscore}.html.erb"
+        template "kit_example_rails.erb", "#{full_kit_directory}/docs/_#{@kit_name_underscore}_default.html.erb"
+        template "kit_ruby_spec.erb", "spec/pb_kits/playbook/kits/#{@kit_name_underscore}_spec.rb"
+        say_status  "complete",
+                    "#{@kit_name_capitalize} rails kit successfully created.",
+                    :green
+      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", "#{full_kit_directory}/_#{@kit_name_underscore}.jsx"
+        template "kit_example_react.erb", "#{full_kit_directory}/docs/_#{@kit_name_underscore}_default.jsx"
+        template "kit_js.erb", "#{full_kit_directory}/docs/index.js"
+
+        # Import kit examples  ===========================
+        append_to_file("app/pb_kits/playbook/packs/react-examples.js") do
+          "import * as #{@kit_name_pascal} from 'pb_#{@kit_name_underscore}/docs'\nWebpackerReact.setup(#{@kit_name_pascal})\n"
+        end
+        append_to_file("app/pb_kits/playbook/index.js") do
+          "\nexport #{@kit_name_pascal} from 'pb_#{@kit_name_underscore}/_#{@kit_name_underscore}.jsx'"
+        end
+
+        say_status  "complete",
+                    "#{@kit_name_capitalize} react kit successfully created.",
+                    :green
+      end
+
+      # Create kit example.yml
+      template "kit_example_yml.erb", "#{full_kit_directory}/docs/example.yml"
+
+      `rubocop --safe-auto-correct #{full_kit_directory}`
+    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,10 @@
+import React from 'react'
+import { <%= @kit_name_pascal %> } from '../../'
+
+const <%= @kit_name_pascal %>Default = () => (
+  <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,7 @@
+<%%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) 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,68 @@
+<%
+break_lines = lambda do |list, spaces = 2, separator = ","|
+  list.join("#{separator}\n#{" " * spaces}") + separator
+end
+
+type_name = "#{@kit_name_pascal}Props"
+
+props_types = @kit_props.map do |key, val|
+  prop_name = key == "classname" ? "className" : key.camelize(:lower)
+  prop_type = case val
+              when "enum", "one_of" then "'option_1' | 'option_2'"
+              when "boolean", "bool" then "boolean"
+              when "object", "obj" then "object"
+              else "string"
+              end
+
+  "#{prop_name}?: #{prop_type}"
+end
+puts props_types.inspect
+
+props_names = @kit_props.keys.map do |key|
+                  case key
+                  when "classname" || "className"
+                    "className" 
+                  when "aria"
+                    "aria = {}"
+                  when "data"
+                    "data = {}"
+                  else 
+                    key
+                  end
+              end
+
+%>
+
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+
+type <%= type_name %> = {
+  <%= break_lines.call(props_types) %>
+}
+
+const <%= @kit_name_pascal %> = (props: <%= type_name %>) => {
+  const {
+    <%= break_lines.call(props_names) %>
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_<%= @kit_name_underscore %>'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+    </div>
+  )
+}
+
+export default <%= @kit_name_pascal %>

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Pb<%= @kit_name_pascal %>
+    class <%= @kit_name_pascal %>
+      include Playbook::Props
+
+      partial "<%= "pb_#{@kit_name_underscore}/#{@kit_name_underscore}" %>"
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require_relative "../../../../app/pb_kits/playbook/pb_<%= @kit_name_underscore %>/<%= @kit_name_underscore %>"
+
+RSpec.describe Playbook::Pb<%= @kit_name_capitalize %>::<%= @kit_name_capitalize %> do
+  subject { Playbook::Pb<%= @kit_name_capitalize %>::<%= @kit_name_capitalize %> }
+
+  it { is_expected.to define_partial }
+
+  # Do not leave this file blank. Use other spec files for example tests.
+end

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

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

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.1.0.pre.alpha1"
+  VERSION = "7.1.0.pre.alpha2"
 end

data/lib/tasks/changelog.rake

@@ -0,0 +1,14 @@
+require 'github_changelog_generator/task'
+
+GitHubChangelogGenerator::RakeTask.new :changelog do |config|
+  config.user = 'powerhome'
+  config.project = 'playbook'
+  config.since_tag = Playbook::VERSION
+  config.header = ''
+  config.issues = false
+  config.base = 'CHANGELOG.md'
+  config.enhancement_prefix = '**Kit Enhancements:**'
+  config.bug_prefix = '**Fixed Bugs:**'
+  config.max_issues = 75
+  config.add_sections = {"New Kits":{"prefix":"**New Kits:**","labels":["new kit"]},"Improvements": {"prefix":"**Improvements:**","labels":["improvement"]},"Breaking": {"prefix":"**Breaking Changes:**","labels":["breaking"]}}
+end

data/lib/tasks/pb_release.rake

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+namespace :pb_release do
+  desc "Update the version number in preparation to release"
+  task version: :environment do
+    puts "\n"
+    puts "*" * 20 + " Create New Playbook Release " + "*" * 20
+    ack = "\nFirst, before creating a new version please make sure you are familiar with SemVer guidlines: "
+    ack += "\nhttps://semver.org/#semantic-versioning-specification-semver. "
+    ack += "\n\nDoing so will ensure the proper version is selected for the release. "
+    ack += "\nSee also: https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version#determining-the-version."
+    ack += "\n\nReady to start? y/N"
+    STDOUT.puts ack
+    agreed = STDIN.gets.chomp.downcase
+
+    if agreed == "y"
+      old_version = Playbook::VERSION
+      STDOUT.puts "What would you like the next release number to be? Currently #{old_version}"
+      new_version = STDIN.gets.chomp
+      puts "Ok great, let's make version #{new_version}"
+      puts "\n\n"
+
+      # Update package.json
+      package = File.read("package.json")
+      new_package = package.gsub(/"version": "#{old_version}",/, "\"version\": \"#{new_version}\",")
+      File.open("package.json", "w") { |file| file.puts new_package }
+      puts "Updated package.json"
+
+      # Update version.rb
+      version_rb = File.read("lib/playbook/version.rb")
+      new_version_rb = version_rb.gsub(/VERSION = "#{old_version}".freeze/, "VERSION = \"#{new_version}\".freeze")
+      File.open("lib/playbook/version.rb", "w") { |file| file.puts new_version_rb }
+      puts "Updated lib/playbook/version.rb"
+
+      # Update gemfile.lock
+      gemfile = File.read("Gemfile.lock")
+      new_gemfile = gemfile.gsub(/playbook_ui \(#{Regexp.escape(old_version)}\)/, "playbook_ui (#{new_version})")
+      File.open("Gemfile.lock", "w") { |file| file.puts new_gemfile }
+      puts "Updated Gemfile.lock"
+      puts "\n\n"
+
+      puts "\nCreating dist files"
+      `yarn release`
+
+      puts "Commit your changes and create a PR to merge to master"
+    end
+  end
+
+  desc "Publish to RubyGems, NPM, and Create a Tag"
+  task push: :environment do
+    version = Playbook::VERSION
+    puts "You about to release version #{version}. Is that correct? (y/N)"
+    input = STDIN.gets.chomp
+    raise Nope unless input.downcase == "y"
+
+    # RubyGems
+    puts "\nCreating Gem..."
+    `gem build playbook_ui.gemspec`
+    puts "\nPushing to RubyGems..."
+    `gem push playbook_ui-#{version}.gem`
+    puts "\nPushed to RubyGems. Now lets clean up..."
+    `rm -rf playbook_ui-*.gem`
+
+    # NPM
+    puts "\nGenerating distribution files"
+    `docker-compose run web yarn release`
+    puts "\nOrganizing distribution files"
+    `rm dist/playbook-rails.css && mv dist/playbook-react.css dist/playbook.css`
+    puts "\nCreating NPM package..."
+    `npm pack`
+    puts "\nPublishing to NPM..."
+    `npm publish playbook-ui-#{version}.tgz`
+    puts "\nPublished to NPM. Now lets clean up..."
+    `rm -rf playbook-ui-*.tgz`
+
+    # Tags
+    puts "\nPushed to NPM. Now lets create a tag..."
+    puts "\nWrite a brief tag release description. You can edit this later on GitHub."
+    description = STDIN.gets.chomp
+    puts "\nCreating Tag..."
+    `git tag -a #{version} -m "#{description}"`
+    puts "\nPushing Tag to GitHub..."
+    `git push origin #{version}`
+
+    puts "\n\n"
+    puts "Complete! Don't forget to add your release notes https://github.com/powerhome/playbook/releases/tag/#{version}"
+  end
+end

data/lib/tasks/playbook_tasks.rake

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "webpacker"
+
+namespace :playbook do
+  namespace :webpacker do
+    desc "Install deps with yarn"
+    task :yarn_install do
+      Dir.chdir(File.join(__dir__, "../..")) do
+        system "yarn install --no-progress --production"
+      end
+    end
+
+    desc "Compile JavaScript packs using webpack for production with digests"
+    task compile: %i[yarn_install environment] do
+      ::Webpacker.with_node_env("production") do
+        if Playbook.webpacker.commands.compile
+          # Successful compilation!
+        else
+          # Failed compilation
+          exit!
+        end
+      end
+    end
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.1.0.pre.alpha1
+  version: 7.1.0.pre.alpha2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-09 00:00:00.000000000 Z
+date: 2020-10-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -530,6 +530,8 @@ files:
 - app/pb_kits/playbook/pb_caption/_caption.scss
 - app/pb_kits/playbook/pb_caption/_caption_mixin.scss
 - app/pb_kits/playbook/pb_caption/caption.rb
+- app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb
+- app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx
 - app/pb_kits/playbook/pb_caption/docs/_caption_light.html.erb
 - app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx
 - app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb
@@ -1836,10 +1838,24 @@ files:
 - app/pb_kits/playbook/vendor.js
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
+- lib/generators/kit/USAGE
+- lib/generators/kit/kit_generator.rb
+- lib/generators/kit/templates/kit_example_rails.erb.tt
+- lib/generators/kit/templates/kit_example_react.erb.tt
+- lib/generators/kit/templates/kit_example_yml.erb.tt
+- lib/generators/kit/templates/kit_html.erb.tt
+- lib/generators/kit/templates/kit_js.erb.tt
+- lib/generators/kit/templates/kit_jsx.erb.tt
+- lib/generators/kit/templates/kit_ruby.erb.tt
+- lib/generators/kit/templates/kit_ruby_spec.erb.tt
+- lib/generators/kit/templates/kit_scss.erb
 - lib/playbook.rb
 - lib/playbook/engine.rb
 - lib/playbook/version.rb
 - lib/playbook_ui.rb
+- lib/tasks/changelog.rake
+- lib/tasks/pb_release.rake
+- lib/tasks/playbook_tasks.rake
 homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT