playbook_ui_docs 14.16.0.pre.rc.5 → 14.17.0.pre.alpha.PBNTR920emojipickerpoc7143

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_picker.jsx

@@ -0,0 +1,371 @@
+import React, { useState, useEffect } from "react"
+import TextInput from '../../pb_text_input/_text_input'
+import Button from "../../pb_button/_button"
+
+// Emojis organized by category with icons for navigation and search names
+const emojiCategories = [
+    {
+      id: 'recent',
+      name: "Recent",
+      icon: '🕒',
+      emojis: [
+        { emoji: '😀', name: 'happy' },
+        { emoji: '👍', name: 'thumbs up' },
+        { emoji: '🎉', name: 'popper' },
+        { emoji: '❤️', name: 'heart' },
+        { emoji: '🔥', name: 'fire' },
+        { emoji: '✨', name: 'sparkles' }
+      ]
+    },
+    {
+      id: 'smileys',
+      name: "Smileys",
+      icon: '😊',
+      emojis: [
+        { emoji: '😀', name: 'happy' },
+        { emoji: '😂', name: 'lmao' },
+        { emoji: '🙂', name: 'smile' },
+        { emoji: '😊', name: 'smiley' },
+        { emoji: '😍', name: 'smile-heart' },
+        { emoji: '🤩', name: 'star-struck' }
+      ]
+    },
+    {
+      id: 'people',
+      name: "People",
+      icon: '👥',
+      emojis: [
+        { emoji: '👍', name: 'thumbs up' },
+        { emoji: '👎', name: 'thumbs down' },
+        { emoji: '👌', name: 'OK' },
+        { emoji: '👋', name: 'wave' },
+        { emoji: '✌️', name: 'victory' },
+        { emoji: '🙏', name: 'pray' }
+      ]
+    },
+    {
+      id: 'animals',
+      name: "Animals",
+      icon: '🐼',
+      emojis: [
+        { emoji: '🐶', name: 'dog' },
+        { emoji: '🐱', name: 'cat' },
+        { emoji: '🐼', name: 'panda' },
+        { emoji: '🦁', name: 'lion' },
+        { emoji: '🐢', name: 'turtle' },
+        { emoji: '🦋', name: 'butterfly' }
+      ]
+    },
+    {
+      id: 'food',
+      name: "Food",
+      icon: '🍔',
+      emojis: [
+        { emoji: '🍎', name: 'apple' },
+        { emoji: '🍕', name: 'pizza' },
+        { emoji: '🍦', name: 'ice cream' },
+        { emoji: '🍩', name: 'doughnut' },
+        { emoji: '🍷', name: 'wine' },
+        { emoji: '🍺', name: 'beer' }
+      ]
+    },
+    {
+      id: 'activities',
+      name: "Activities",
+      icon: '⚽',
+      emojis: [
+        { emoji: '⚽', name: 'soccer ball' },
+        { emoji: '🏀', name: 'basketball' },
+        { emoji: '🎮', name: 'video game' },
+        { emoji: '🎬', name: 'clapper board' },
+        { emoji: '🎨', name: 'artist palette' },
+        { emoji: '🎭', name: 'performing arts' }
+      ]
+    },
+    {
+      id: 'travel',
+      name: "Travel",
+      icon: '✈️',
+      emojis: [
+        { emoji: '🚗', name: 'automobile' },
+        { emoji: '✈️', name: 'airplane' },
+        { emoji: '🚲', name: 'bicycle' },
+        { emoji: '⛵', name: 'sailboat' },
+        { emoji: '🏖️', name: 'beach' },
+        { emoji: '🗽', name: 'Statue of Liberty' }
+      ]
+    },
+    {
+      id: 'symbols',
+      name: "Symbols",
+      icon: '🔣',
+      emojis: [
+        { emoji: '❤️', name: 'heart' },
+        { emoji: '🔥', name: 'fire' },
+        { emoji: '✨', name: 'sparkles' },
+        { emoji: '💯', name: 'hundred' },
+        { emoji: '⭐', name: 'star' },
+        { emoji: '💪', name: 'flex' }
+      ]
+    }
+  ]
+
+  const TextInputEmojiPicker = (props) => {
+    const [inputText, setInputText] = useState('')
+    const [showPicker, setShowPicker] = useState(false)
+    const [activeCategory, setActiveCategory] = useState('smileys')
+    const [searchQuery, setSearchQuery] = useState('')
+    const [filteredEmojis, setFilteredEmojis] = useState([])
+    const [recentEmojis, setRecentEmojis] = useState([
+      { emoji: '😀', name: 'happy' },
+      { emoji: '👍', name: 'thumbs up' },
+      { emoji: '🎉', name: 'popper' },
+      { emoji: '❤️', name: 'heart' },
+      { emoji: '🔥', name: 'fire' },
+      { emoji: '✨', name: 'sparkles' }
+    ])
+
+    // Handle emoji selection
+    const handleEmojiClick = (emojiObj) => {
+      setInputText(prevInput => prevInput + emojiObj.emoji)
+
+      // Add to recent emojis
+      if (!recentEmojis.some(item => item.emoji === emojiObj.emoji)) {
+        const updatedRecent = [emojiObj, ...recentEmojis.slice(0, 5)]
+        setRecentEmojis(updatedRecent)
+
+        // Update the recent category
+        const recentCategory = emojiCategories.find(cat => cat.id === 'recent')
+        if (recentCategory) {
+          recentCategory.emojis = updatedRecent
+        }
+      }
+
+      // Uncomment to close picker after selection
+      // setShowPicker(false)
+    }
+
+    // Handle search
+    useEffect(() => {
+      if (searchQuery.trim() === '') {
+        setFilteredEmojis([])
+        return
+      }
+
+      // Collect all emojis and filter based on search
+      const allEmojis = emojiCategories.flatMap(category =>
+        category.emojis.map(emojiObj => ({
+          ...emojiObj,
+          categoryName: category.name
+        }))
+      )
+
+      // Search by emoji name or category
+      const filtered = allEmojis.filter(item =>
+        item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.categoryName.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+
+      setFilteredEmojis(filtered)
+    }, [searchQuery])
+
+    return (
+      <div className="emoji-container">
+        <div className="input-wrapper">
+          <TextInput
+              id="emoji-text-input"
+              name="emojiPicker"
+              onChange={(e) => setInputText(e.target.value)}
+              placeholder="Enter some emojis here"
+              value={inputText}
+              {...props}
+          />
+          <Button
+              className="emoji-toggle-button"
+              marginRight="lg"
+              onClick={() => setShowPicker(!showPicker)}
+              variant="link"
+          >
+            😊
+          </Button>
+        </div>
+
+        {showPicker && (
+          <div className="picker-wrapper">
+            {/* Search Bar */}
+            <TextInput
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search emojis..."
+                type="text"
+                value={searchQuery}
+                {...props}
+            />
+
+            {/* Category Navigation */}
+            <div className="category-nav">
+              {emojiCategories.map(category => (
+                <button
+                    className={`category-button ${activeCategory === category.id ? 'active' : ''}`}
+                    key={category.id}
+                    onClick={() => {
+                      setActiveCategory(category.id)
+                      setSearchQuery('')
+                      document.getElementById(`category-${category.id}`)?.scrollIntoView({ behavior: 'smooth' })
+                    }}
+                    title={category.name}
+                >
+                  {category.icon}
+                </button>
+              ))}
+            </div>
+
+            {/* Emoji Content */}
+            <div className="emoji-content">
+              {searchQuery.trim() !== '' ? (
+                // Search Results
+                <div className="search-results">
+                  <div className="category-title">Search Results</div>
+                  {filteredEmojis.length > 0 ? (
+                    <div className="emoji-grid">
+                      {filteredEmojis.map((item, index) => (
+                        <Button
+                            className="emoji-button"
+                            key={`search-${index}`}
+                            onClick={() => handleEmojiClick(item)}
+                            title={item.name}
+                            variant="link"
+                        >
+                          {item.emoji}
+                        </Button>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="no-results">No emojis found</div>
+                  )}
+                </div>
+              ) : (
+                // All Categories
+                <div className="all-categories">
+                  {emojiCategories.map(category => (
+                    <div
+                        className="category-section"
+                        id={`category-${category.id}`}
+                        key={category.id}
+                    >
+                      <div className="category-title">
+                        {category.name}
+                      </div>
+                      <div className="emoji-grid">
+                        {category.emojis.map((emojiObj, index) => (
+                          <Button
+                              className="emoji-button"
+                              key={`${category.id}-${index}`}
+                              onClick={() => handleEmojiClick(emojiObj)}
+                              title={emojiObj.name}
+                              variant="link"
+                          >
+                            {emojiObj.emoji}
+                          </Button>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        <style jsx>{`
+          .emoji-container {
+            font-family: Arial, sans-serif;
+            max-width: 500px;
+            position: relative;
+          }
+
+          .input-wrapper {
+            display: flex;
+            margin-bottom: 10px;
+            position: relative;
+          }
+
+          .picker-wrapper {
+            position: absolute;
+            z-index: 100;
+            margin-top: 5px;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 12px;
+            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+            width: 320px;
+          }
+
+          .search-container {
+            margin-bottom: 12px;
+          }
+
+          .category-nav {
+            display: flex;
+            overflow-x: auto;
+            padding-bottom: 8px;
+            margin-bottom: 12px;
+            border-bottom: 1px solid #eee;
+          }
+
+          .category-button {
+            background: none;
+            border: none;
+            font-size: 18px;
+            padding: 8px;
+            cursor: pointer;
+            margin-right: 4px;
+            border-radius: 4px;
+            min-width: 36px;
+          }
+
+          .category-button.active {
+            background-color: #f0f0f0;
+          }
+
+          .emoji-content {
+            max-height: 300px;
+            overflow-y: auto;
+            scroll-behavior: smooth;
+          }
+
+          .all-categories {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+          }
+
+          .category-section {
+            padding-top: 8px;
+            scroll-margin-top: 8px;
+          }
+
+          .category-title {
+            font-weight: bold;
+            margin-bottom: 8px;
+            color: #555;
+            font-size: 14px;
+          }
+
+          .emoji-grid {
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            gap: 2px;
+          }
+
+          .no-results {
+            padding: 20px;
+            text-align: center;
+            color: #999;
+          }
+        `}</style>
+      </div>
+    );
+  };
+
+export default TextInputEmojiPicker

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

@@ -18,6 +18,7 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_mask: Mask
+  - text_input_emoji_picker: Emoji Picker
 
   swift:
     - text_input_default_swift: Default

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

@@ -6,3 +6,4 @@ export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
+export { default as TextInputEmojiPicker } from './_text_input_emoji_picker.jsx'

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

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-disabled",
+    disabled: true,
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>

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

@@ -0,0 +1,23 @@
+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 TypeaheadDisabled = (props) => {
+  return (
+    <Typeahead
+        disabled
+        label="Colors"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadDisabled

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

@@ -18,18 +18,18 @@ const USERS = [
     territory: "PHL",
   },
   {
-    name: "Jason Cypret",
-    title: "Vice President of User Experience",
+    name: "Carlos Lima",
+    title: "Nitro Developer",
     territory: "PHL",
   },
   {
     name: "Stephen Marshall",
-    title: "Senior User Experience Engineer",
+    title: "Senior Nitro Developer",
     territory: "PHL",
   },
   {
     name: "Jasper Furniss",
-    title: "Senior User Experience Engineer",
+    title: "Lead User Experience Engineer",
     territory: "PHL",
   },
 ];

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

@@ -14,6 +14,7 @@ examples:
     - typeahead_truncated_text: Truncated Text
     - typeahead_dynamic_options: Dynamic Options
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
+    - typeahead_disabled: Disabled
 
   react:
     - typeahead_default: Default
@@ -32,3 +33,4 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
+    - typeahead_disabled: Disabled

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

@@ -14,3 +14,4 @@ export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
+export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb

@@ -0,0 +1,22 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    name_style: "body",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    name_style: "detail",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { User } from 'playbook-ui'
+
+const UserFontOptions = (props) => {
+  return (
+    <div>
+      <div className="pb--doc-demo-row">
+        <div>
+          <User
+              align="center"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              nameStyle= "body"
+              orientation="horizontal"
+              size= "md"
+              territory= "PHL"
+              title="Remodeling Consultant"
+              {...props}
+          />
+        </div>
+
+        <div>
+          <User
+              align="left"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              nameStyle= "detail"
+              orientation="horizontal"
+              size= "md"
+              territory= "PHL"
+              title= "Remodeling Consultant"
+              {...props}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UserFontOptions

data/app/pb_kits/playbook/pb_user/docs/_user_font_options_rails.md

@@ -0,0 +1,5 @@
+Passing a `name_style` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
+
+Passing a `title_style` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
+
+The size of the `caption` is determined by the `size` prop.

data/app/pb_kits/playbook/pb_user/docs/_user_font_options_react.md

@@ -0,0 +1,5 @@
+Passing a `nameStyle` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
+
+Passing a `titleStyle` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
+
+The size of the `caption` is determined by the `size` prop.

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

@@ -9,6 +9,7 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_rails: Block Content Subtitle
+  - user_font_options: Font Options
 
   react:
   - user_default: Default
@@ -19,6 +20,7 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
+  - user_font_options: Font Options
 
   swift:
   - user_horizontal_swift: Horizontal

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

@@ -6,3 +6,4 @@ export { default as UserSize } from './_user_size.jsx'
 export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 export { default as UserSubtitle } from './_user_subtitle.jsx'
 export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
+export { default as UserFontOptions } from './_user_font_options.jsx'