playbook_ui 10.23.0.pre.cachetest → 10.23.0

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -0,0 +1,274 @@
+type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
+type None = "none"
+
+type AllSizes = None & Sizes
+
+type Margin = {
+  marginRight?: AllSizes,
+  marginLeft?: AllSizes,
+  marginTop?: AllSizes,
+  marginBottom?: AllSizes,
+  marginX?: AllSizes,
+  marginY?: AllSizes,
+  margin?: AllSizes,
+}
+
+type Padding = {
+  paddingRight?: AllSizes,
+  paddingLeft?: AllSizes,
+  paddingTop?: AllSizes,
+  paddingBottom?: AllSizes,
+  paddingX?: AllSizes,
+  paddingY?: AllSizes,
+  padding?: AllSizes,
+}
+
+type Dark = {
+  dark?: boolean,
+}
+
+type NumberSpacing = {
+  numberSpacing?: "tabular",
+}
+
+type MaxWidth = {
+  maxWidth?: Sizes,
+}
+
+type ZIndex = {
+  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
+}
+
+type Shadow = {
+  shadow?: "none" | "deep" | "deeper" | "deepest",
+}
+
+type LineHeight = {
+  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
+}
+
+type Display = {
+  display?: "block" | "flex" | "hidden" | "inline_block" | "inline" | "inline_flex",
+}
+
+type Cursor = {
+  cursor?: "pointer",
+}
+
+type BorderRadius = {
+  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
+}
+
+type Flex = {
+  flex?: "none" | "initial" | "auto" | 1
+}
+
+type FlexDirection = {
+  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
+}
+
+type FlexGrow = {
+  flexGrow?: 0 | 1
+}
+
+type FlexShrink = {
+  flexShrink?: 0 | 1
+}
+
+type FlexWrap = {
+  flexWrap?: "wrap" | "nowrap" | "wrapReverse"
+}
+
+type Alignment = "start" | "end" | "center"
+
+type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
+
+type JustifyContent = {
+  justifyContent?: Alignment & Space
+}
+
+type JustifySelf = {
+  justifySelf?: Alignment & ("auto" | "stretch")
+}
+
+type AlignContent = {
+  alignContent?: Alignment & Space
+}
+
+type AlignItems = {
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+}
+
+type AlignSelf = {
+  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
+}
+
+type Order = {
+  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+}
+
+export type GlobalProps = AlignContent & AlignItems & AlignSelf &
+  BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
+  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
+  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
+  Shadow & ZIndex
+
+// Prop categories
+const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
+  spacingProps: ({
+    marginRight,
+    marginLeft,
+    marginTop,
+    marginBottom,
+    marginX,
+    marginY,
+    margin,
+    paddingRight,
+    paddingLeft,
+    paddingTop,
+    paddingBottom,
+    paddingX,
+    paddingY,
+    padding,
+  }: Margin & Padding) => {
+    let css = ''
+    css += marginRight ? `mr_${marginRight} ` : ''
+    css += marginLeft ? `ml_${marginLeft} ` : ''
+    css += marginTop ? `mt_${marginTop} ` : ''
+    css += marginBottom ? `mb_${marginBottom} ` : ''
+    css += marginX ? `mx_${marginX} ` : ''
+    css += marginY ? `my_${marginY} ` : ''
+    css += margin ? `m_${margin} ` : ''
+    css += paddingRight ? `pr_${paddingRight} ` : ''
+    css += paddingLeft ? `pl_${paddingLeft} ` : ''
+    css += paddingTop ? `pt_${paddingTop} ` : ''
+    css += paddingBottom ? `pb_${paddingBottom} ` : ''
+    css += paddingX ? `px_${paddingX} ` : ''
+    css += paddingY ? `py_${paddingY} ` : ''
+    css += padding ? `p_${padding} ` : ''
+    return css
+  },
+  darkProps: ({ dark }: Dark) => {
+    let css = ''
+    css += dark ? 'dark' : ''
+    return css
+  },
+  numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
+    let css = ''
+    css += numberSpacing ? `ns_${numberSpacing} ` : ''
+    return css
+  },
+  maxWidthProps: ({ maxWidth }: MaxWidth) => {
+    let css = ''
+    css += maxWidth ? `max_width_${maxWidth } ` : ''
+    return css
+  },
+  zIndexProps: ({ zIndex }: ZIndex) => {
+    let css = ''
+    css += zIndex ? `z_index_${zIndex } ` : ''
+    return css
+  },
+  shadowProps: ({ shadow }: Shadow) => {
+    let css = ''
+    css += shadow ? `shadow_${shadow} ` : ''
+    return css
+  },
+  lineHeightProps: ({ lineHeight }: LineHeight) => {
+    let css = ''
+    css += lineHeight ? `line_height_${lineHeight} ` : ''
+    return css
+  },
+  displayProps: ({ display }: Display) => {
+    let css = ''
+    css += display ? `display_${display} ` : ''
+    return css
+  },
+  cursorProps: ({ cursor }: Cursor) => {
+    let css = ''
+    css += cursor ? `cursor_${cursor} ` : ''
+    return css
+  },
+  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
+    let css = ''
+    css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
+      flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
+        flexDirection ? `flex_direction_${flexDirection} ` : ''
+    return css
+  },
+  flexWrapProps: ({ flexWrap }: FlexWrap) => {
+    let css = ''
+    css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
+      flexWrap == 'nowrap' ? 'flex_nowrap' :
+        flexWrap ? `flex_wrap_${flexWrap} ` : ''
+    return css
+  },
+  justifyContentProps: ({ justifyContent }: JustifyContent) => {
+    let css = ''
+    css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
+      justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
+        justifyContent == 'spaceAround' ? 'justify_content_space_around' :
+          justifyContent ? `justify_content_${justifyContent}` : ''
+    return css
+  },
+  justifySelfProps: ({ justifySelf }: JustifySelf) => {
+    let css = ''
+    css += justifySelf ? `justify_self_${justifySelf}` : ''
+    return css
+  },
+  alignItemsProps: ({ alignItems }: AlignItems) => {
+    let css = ''
+    css += alignItems == 'flexStart' ? 'align_items_flex_start' :
+      alignItems == 'flexEnd' ? 'align_items_flex_end' :
+        alignItems ? `align_items_${alignItems}` : ''
+    return css
+  },
+  alignContentProps: ({ alignContent }: AlignContent) => {
+    let css = ''
+    css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
+      alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
+        alignContent == 'spaceAround' ? 'align_content_space_around' :
+          alignContent ? `align_content_${alignContent}` : ''
+    return css
+  },
+  alignSelfProps: ({ alignSelf }: AlignSelf) => {
+    let css = ''
+    css += alignSelf ? `align_self_${alignSelf}` : ''
+    return css
+  },
+  flexProps: ({ flex }: Flex) => {
+    let css = ''
+    css += flex ? `flex_${flex}` : ''
+    return css
+  },
+  flexGrowProps: ({ flexGrow }: FlexGrow) => {
+    let css = ''
+    css += flexGrow ? `flex_grow_${flexGrow}` : ''
+    return css
+  },
+  flexShrinkProps: ({ flexShrink }: FlexShrink) => {
+    let css = ''
+    css += flexShrink ? `flex_shrink_${flexShrink}` : ''
+    return css
+  },
+  orderProps: ({ order }: Order) => {
+    let css = ''
+    css += order ? `order_${order}` : ''
+    return css
+  }
+}
+
+export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
+  const allProps = { ...props, ...defaultProps }
+  return Object.keys(PROP_CATEGORIES).map((key) => {
+    return PROP_CATEGORIES[key](allProps)
+  }).filter((value) => value?.length > 0).join(" ")
+}
+
+export const deprecatedProps = (kit: string, props: string[] = []): void => {
+  if (process.env.NODE_ENV === 'development') {
+    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+    props.forEach((prop) => {
+      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
+    })
+  }
+}

data/app/pb_kits/playbook/utilities/{props.js → props.ts}

@@ -10,10 +10,11 @@ import classnames from 'classnames'
  * @param {Object} data the object containing the data to derive the props from.
  * @returns {Object} an object whose keys have the prefix added to them.
  */
-const buildPrefixedProps = (prefix, data) => Object.keys(data).reduce((props, key) => {
-  props[`${prefix}-${key}`] = data[key]
-  return props
-}, {})
+const buildPrefixedProps = (prefix: string, data: {[key: string]: any}) => 
+  Object.keys(data).reduce((props: {[key: string]: any}, key: string) => {
+    props[`${prefix}-${key}`] = data[key]
+    return props
+  }, {})
 
 /**
  * Represent a "No-Operation" function that can be used as a sensible
@@ -29,7 +30,8 @@ export const noop = () => {}
  * @param {Object} aria the object containing the aria prop values.
  * @returns {Object} an object holding the HTML valid aria props and their values.
  */
-export const buildAriaProps = (aria) => buildPrefixedProps('aria', aria)
+export const buildAriaProps = (aria: {[key: string]: string}): {[key: string]: string} => 
+  buildPrefixedProps('aria', aria)
 
 /**
  * Maps a given data object into HTML valid data attribtues and their values.
@@ -37,7 +39,7 @@ export const buildAriaProps = (aria) => buildPrefixedProps('aria', aria)
  * @param {Object} data the object containing the data prop values.
  * @returns {Object} an object holding the HTML valid data props and their values.
  */
-export const buildDataProps = (data) => buildPrefixedProps('data', data)
+export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps('data', data)
 
 /**
  * Builds a Playbook valid root className off of the incoming css rules.
@@ -45,5 +47,5 @@ export const buildDataProps = (data) => buildPrefixedProps('data', data)
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
  * @returns {String} the derived root className value.
  */
-export const buildCss = (...rules) => classnames(rules).replace(/\s/g, '_')
+export const buildCss = (...rules: string[]) => classnames(rules).replace(/\s/g, '_')
 

data/lib/playbook/align_content.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignContent
+    def self.included(base)
+      base.prop :align_content
+    end
+
+    def align_content_props
+      selected_props = align_content_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_content_value = send(k)
+        "align_content_#{align_content_value}" if align_content_values.include? align_content_value
+      end.compact.join(" ")
+    end
+
+    def align_content_options
+      {
+        align_content: "align_content",
+      }
+    end
+
+    def align_content_values
+      %w[start end center space_between space_around space_evenly]
+    end
+  end
+end

data/lib/playbook/align_items.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignItems
+    def self.included(base)
+      base.prop :align_items
+    end
+
+    def align_items_props
+      selected_props = align_items_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_items_value = send(k)
+        "align_items_#{align_items_value}" if align_items_values.include? align_items_value
+      end.compact.join(" ")
+    end
+
+    def align_items_options
+      {
+        align_items: "align_items",
+      }
+    end
+
+    def align_items_values
+      %w[flex_start flex_end start end center baseline stretch]
+    end
+  end
+end

data/lib/playbook/align_self.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignSelf
+    def self.included(base)
+      base.prop :align_self
+    end
+
+    def align_self_props
+      selected_props = align_self_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_self_value = send(k)
+        "align_self_#{align_self_value}" if align_self_values.include? align_self_value
+      end.compact.join(" ")
+    end
+
+    def align_self_options
+      {
+        align_self: "align_self",
+      }
+    end
+
+    def align_self_values
+      %w[auto start end center stretch baseline]
+    end
+  end
+end

data/lib/playbook/classnames.rb

@@ -20,6 +20,17 @@ module Playbook
         line_height_props,
         display_props,
         cursor_props,
+        flex_direction_props,
+        flex_wrap_props,
+        justify_content_props,
+        justify_self_props,
+        align_items_props,
+        align_content_props,
+        align_self_props,
+        flex_props,
+        flex_grow_props,
+        flex_shrink_props,
+        order_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/flex.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Flex
+    def self.included(base)
+      base.prop :flex
+    end
+
+    def flex_props
+      selected_props = flex_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_value = send(k)
+        "flex_#{flex_value}" if flex_values.include? flex_value
+      end.compact.join(" ")
+    end
+
+    def flex_options
+      {
+        flex: "flex",
+      }
+    end
+
+    def flex_values
+      %w[auto initial 0 1 2 3 4 5 6 7 8 9 10 11 12 none]
+    end
+  end
+end

data/lib/playbook/flex_direction.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexDirection
+    def self.included(base)
+      base.prop :flex_direction
+    end
+
+    def flex_direction_props
+      selected_props = flex_direction_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_direction_value = send(k)
+        "flex_direction_#{flex_direction_value}" if flex_direction_values.include? flex_direction_value
+      end.compact.join(" ")
+    end
+
+    def flex_direction_options
+      {
+        flex_direction: "flex_direction",
+      }
+    end
+
+    def flex_direction_values
+      %w[row column row_reverse column_reverse]
+    end
+  end
+end

data/lib/playbook/flex_grow.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexGrow
+    def self.included(base)
+      base.prop :flex_grow
+    end
+
+    def flex_grow_props
+      selected_props = flex_grow_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_grow_value = send(k)
+        "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value
+      end.compact.join(" ")
+    end
+
+    def flex_grow_options
+      {
+        flex_grow: "flex_grow",
+      }
+    end
+
+    def flex_grow_values
+      %w[1 0]
+    end
+  end
+end

data/lib/playbook/flex_shrink.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexShrink
+    def self.included(base)
+      base.prop :flex_shrink
+    end
+
+    def flex_shrink_props
+      selected_props = flex_shrink_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_shrink_value = send(k)
+        "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value
+      end.compact.join(" ")
+    end
+
+    def flex_shrink_options
+      {
+        flex_shrink: "flex_shrink",
+      }
+    end
+
+    def flex_shrink_values
+      %w[1 0]
+    end
+  end
+end

data/lib/playbook/flex_wrap.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexWrap
+    def self.included(base)
+      base.prop :flex_wrap
+    end
+
+    def flex_wrap_props
+      selected_props = flex_wrap_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_wrap_value = send(k)
+        "flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
+      end.compact.join(" ")
+    end
+
+    def flex_wrap_options
+      {
+        flex_wrap: "flex_wrap",
+      }
+    end
+
+    def flex_wrap_values
+      %w[wrap nowrap wrap_reverse]
+    end
+  end
+end

data/lib/playbook/justify_content.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module JustifyContent
+    def self.included(base)
+      base.prop :justify_content
+    end
+
+    def justify_content_props
+      selected_props = justify_content_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        justify_content_value = send(k)
+        "justify_content_#{justify_content_value}" if justify_content_values.include? justify_content_value
+      end.compact.join(" ")
+    end
+
+    def justify_content_options
+      {
+        justify_content: "justify_content",
+      }
+    end
+
+    def justify_content_values
+      %w[start end center space_between space_around space_evenly]
+    end
+  end
+end

data/lib/playbook/justify_self.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module JustifySelf
+    def self.included(base)
+      base.prop :justify_self
+    end
+
+    def justify_self_props
+      selected_props = justify_self_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        justify_self_value = send(k)
+        "justify_self_#{justify_self_value}" if justify_self_values.include? justify_self_value
+      end.compact.join(" ")
+    end
+
+    def justify_self_options
+      {
+        justify_self: "justify_self",
+      }
+    end
+
+    def justify_self_values
+      %w[auto start end center stretch]
+    end
+  end
+end

data/lib/playbook/kit_base.rb

@@ -8,6 +8,17 @@ require "playbook/shadow"
 require "playbook/line_height"
 require "playbook/display"
 require "playbook/cursor"
+require "playbook/flex_direction"
+require "playbook/flex_wrap"
+require "playbook/justify_content"
+require "playbook/justify_self"
+require "playbook/align_items"
+require "playbook/align_content"
+require "playbook/align_self"
+require "playbook/flex"
+require "playbook/flex_grow"
+require "playbook/flex_shrink"
+require "playbook/order"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -21,6 +32,17 @@ module Playbook
     include Playbook::LineHeight
     include Playbook::Display
     include Playbook::Cursor
+    include Playbook::FlexDirection
+    include Playbook::FlexWrap
+    include Playbook::JustifyContent
+    include Playbook::JustifySelf
+    include Playbook::AlignItems
+    include Playbook::AlignContent
+    include Playbook::AlignSelf
+    include Playbook::Flex
+    include Playbook::FlexGrow
+    include Playbook::FlexShrink
+    include Playbook::Order
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/order.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Order
+    def self.included(base)
+      base.prop :order
+    end
+
+    def order_props
+      selected_props = order_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        order_value = send(k)
+        "order_#{order_value}" if order_values.include? order_value
+      end.compact.join(" ")
+    end
+
+    def order_options
+      {
+        order: "order",
+      }
+    end
+
+    def order_values
+      %w[1 2 3 4 5 6 7 8 9 10 11 12 first none]
+    end
+  end
+end