playbook_ui 13.14.0 → 13.15.0.pre.alpha.PLAY10851907

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
-const EditorToolbar = ({ editor, extensions }:any) => {
+const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -34,19 +34,27 @@ const EditorToolbar = ({ editor, extensions }:any) => {
   ]
 
   return (
-    <Background backgroundColor="white" className="toolbar">
-      <Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
-        <FlexItem className="toolbar_block" displayFlex>
+    <Background backgroundColor="white"
+        className="toolbar"
+    >
+      <Flex flex="0"
+          justify="between"
+          paddingX="sm"
+          paddingY="xxs"
+      >
+        <FlexItem className="toolbar_block"
+            displayFlex
+        >
           <ToolbarDropdown editor={editor}/>
           <SectionSeparator orientation="vertical" />
             {toolbaritems && toolbaritems.map(
-              ({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
+              ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
                 <EditorButton
-                  classname={classname}
-                  icon={icon}
-                  key={index}
-                  text={text}
-                  onclick={onclick}
+                    classname={classname}
+                    icon={icon}
+                    key={index}
+                    onclick={onclick}
+                    text={text}
                 />
               )
             )}

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -9,7 +9,7 @@ import NavItem from '../../pb_nav/_item'
 
 import { ToolbarTypes } from './EditorTypes'
 
-const ToolbarDropdown = ({editor}: any) => {
+const ToolbarDropdown = ({editor}: any): React.ReactElement => {
   const [showPopover, setShowPopover] = useState(false)
 
 const toolbarDropdownItems = [
@@ -81,11 +81,21 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
   if (isActive) {
     activeCount ++
     activeItems.push(
-      <Flex align="center" key={icon} gap="xs">
-        <Icon icon={icon} size="lg" />
+      <Flex align="center"
+          gap="xs"
+          key={icon}
+      >
+        <Icon icon={icon}
+            size="lg"
+        />
         <div>{text}</div>
-        <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
-          <Icon fixedWidth icon="angle-down" margin-left="xs" />
+        <Flex className={showPopover ? "fa-flip-vertical" : ""}
+            display="inline_flex"
+        >
+          <Icon fixedWidth
+              icon="angle-down"
+              margin-left="xs"
+          />
         </Flex>
       </Flex>
     );
@@ -93,7 +103,10 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
 }
 
 const popoverReference = (
-  <Button className="editor-dropdown-button" onClick={handleTogglePopover} variant="secondary">
+  <Button className="editor-dropdown-button"
+      onClick={handleTogglePopover}
+      variant="secondary"
+  >
     {
        activeCount === 2 ? (
         activeItems[1]
@@ -101,11 +114,21 @@ const popoverReference = (
         activeCount === 1 ? (
         activeItems[0] || null
         ) : (
-          <Flex align="center" key="paragraph" gap="xs">
-            <Icon icon="paragraph" size="lg" />
+          <Flex align="center"
+              gap="xs"
+              key="paragraph"
+          >
+            <Icon icon="paragraph"
+                size="lg"
+            />
             <div>Paragraph</div>
-            <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
-              <Icon fixedWidth icon="angle-down" margin-left="xs" />
+            <Flex className={showPopover ? "fa-flip-vertical" : ""}
+                display="inline_flex"
+            >
+              <Icon fixedWidth
+                  icon="angle-down"
+                  margin-left="xs"
+              />
             </Flex>
           </Flex>
         )
@@ -124,21 +147,21 @@ const popoverReference = (
           show={showPopover}
       >
         <Nav 
-          paddingTop="xs"
-          paddingBottom="xs" 
-          variant="subtle"
+            paddingBottom="xs"
+            paddingTop="xs" 
+            variant="subtle"
         >
-          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
+          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}: ToolbarTypes, index: number) => (
             <NavItem
-              cursor="pointer"
-              className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
-              iconLeft={icon}
-              key={`${text}_${index}`}
-              margin='none'
-              onClick={()=> {onclick(); setShowPopover(false)}}
-              text={text}
-              paddingTop='xxs'
-              paddingBottom='xxs'
+                className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
+                cursor="pointer"
+                iconLeft={icon}
+                key={`${text}_${index}`}
+                margin='none'
+                onClick={()=> {onclick(); setShowPopover(false)}}
+                paddingBottom='xxs'
+                paddingTop='xxs'
+                text={text}
             />
           ))}
         </Nav>

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx

@@ -3,7 +3,7 @@ import FlexItem from "../../pb_flex/_flex_item";
 import EditorButton from "./EditorButton";
 import { ToolbarTypes } from "./EditorTypes";
 
-const ToolbarHistoryItems = ({editor}:any) => {
+const ToolbarHistoryItems = ({editor}: any): React.ReactElement => {
 
 const toolbarHistoryItems = [
     {
@@ -26,14 +26,14 @@ const toolbarHistoryItems = [
     <>
     <FlexItem displayFlex>
           {toolbarHistoryItems.map(
-            ({ onclick, classname, disable, icon, text }:ToolbarTypes, index:number) => (
+            ({ onclick, classname, disable, icon, text }: ToolbarTypes, index: number) => (
               <EditorButton
-                classname={classname}
-                onclick={onclick}
-                disable={disable}
-                icon={icon}
-                key={index}
-                text={text}
+                  classname={classname}
+                  disable={disable}
+                  icon={icon}
+                  key={index}
+                  onclick={onclick}
+                  text={text}
               />
             )
           )}

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx

@@ -2,7 +2,7 @@ import React, {useCallback} from "react";
 import EditorButton from "./EditorButton";
 import { ToolbarTypes } from "./EditorTypes";
 
-const ToolbarNodes = ({editor}:any) => {
+const ToolbarNodes = ({editor}: any): React.ReactElement => {
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
 const setLink = useCallback(() => {
@@ -42,13 +42,13 @@ const toolbarNodesItems = [
 
 return (
     <>
-        {toolbarNodesItems.map(({ onclick, icon, text, isActive }:ToolbarTypes, index:number) => (
+        {toolbarNodesItems.map(({ onclick, icon, text, isActive }: ToolbarTypes, index: number) => (
             <EditorButton
-            classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
-            onclick={onclick}
-            icon={icon}
-            key={index}
-            text={text}
+                classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
+                icon={icon}
+                key={index}
+                onclick={onclick}
+                text={text}
             />
         ))}
    </>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -17,27 +17,27 @@ import { TrixEditor } from "react-trix"
 import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {
-  attributeIsActive?: Function,
+  attributeIsActive?: ([any]: string) => boolean,
   element?: HTMLElement,
-  getSelectedDocument?: Function,
+  getSelectedDocument?: () => any,
   getSelectedRange?: () => Array<number>,
-  insertHTML?: Function,
-  loadHTML?: Function,
-  setSelectedRange?: (range: Array<number>) => void,  
+  insertHTML?: ([any]: string) => void,
+  loadHTML?: ([any]: string) => void,
+  setSelectedRange?: (range: Array<number>) => void,
 }
 
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
-  toolbarBottom?: Boolean,
+  toolbarBottom?: boolean,
   children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  inline?: boolean, 
+  inline?: boolean,
   extensions?: { [key: string]: string }[],
   name?: string,
   onChange: (html: string, text: string) => void,
@@ -49,7 +49,7 @@ type RichTextEditorProps = {
   maxWidth?: string
 } & GlobalProps
 
-const RichTextEditor = (props: RichTextEditorProps) => {
+const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const {
     aria = {},
     advancedEditor,
@@ -81,7 +81,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
     element = editor?.element
 
-
   // DOM manipulation must wait for editor to be ready
   if (editor) {
     const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -117,6 +116,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     focus
       ? (document.addEventListener('trix-focus', useFocus),
         document.addEventListener('trix-blur', useFocus),
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         useFocus())
       : null
 
@@ -164,10 +164,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={css}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={css}
     >
       {
         advancedEditor ? (
@@ -175,9 +175,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
               className={classnames("pb_rich_text_editor_advanced_container", { 
               ["toolbar-active"]: advancedEditorToolbar,
               })}
-            >
+          >
             {advancedEditorToolbar && (
-              <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+              <EditorToolbar editor={advancedEditor}
+                  extensions={extensions}
+              />
             )}
           { children }
           </div>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -12,7 +12,7 @@ type SectionSeparatorProps = {
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string; },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   lineStyle?: "solid" | "dashed",
   orientation?: "horizontal" | "vertical",
@@ -20,7 +20,7 @@ type SectionSeparatorProps = {
   variant?: "card" | "background",
 }
 
-const SectionSeparator = (props: SectionSeparatorProps) => {
+const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const {
     aria = {},
     children,
@@ -42,17 +42,19 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   return (
 
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       {
         children && children ||
         text && (
           <span>
-            <Caption text={text} dark={dark} />
+            <Caption dark={dark}
+                text={text}
+            />
           </span>
         )
       }

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -24,7 +24,7 @@ type SelectProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   includeBlank?: string,
   inline?: boolean,
@@ -63,7 +63,7 @@ const Select = ({
   inline = false,
   multiple = false,
   name,
-  onChange = () => {},
+  onChange = () => undefined,
   options = [],
   required = false,
   value,

data/app/pb_kits/playbook/pb_select/docs/_select_default_swift.md

@@ -0,0 +1,15 @@
+![select-default](https://github.com/powerhome/playbook/assets/54749071/ead0e074-46ae-425a-ab32-d9c4418a0783)
+
+
+```swift
+let defaultOptions = [
+    (value: "1", text: "Burgers"),
+    (value: "2", text: "Pizza"),
+    (value: "3", text: "Tacos")
+  ]
+@State private var defaultState = ""
+
+ PBSelect(title: "Favorite Food", options: defaultOptions, style: .default) { selected in
+            defaultState = selected
+          }
+```

data/app/pb_kits/playbook/pb_select/docs/_select_error_swift.md

@@ -0,0 +1,18 @@
+![select-error](https://github.com/powerhome/playbook/assets/54749071/c02e365b-c3a1-446b-b9f2-47db11315786)
+
+```swift
+let defaultOptions = [
+    (value: "1", text: "Burgers"),
+    (value: "2", text: "Pizza"),
+    (value: "3", text: "Tacos")
+  ]
+@State private var errorState = ""
+
+ PBSelect(
+            title: "Favorite Food",
+            options: defaultOptions,
+            style: .error("Please make a valid selection")
+          ) { selected in
+            errorState = selected
+          }
+```

data/app/pb_kits/playbook/pb_select/docs/_select_props_table.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **title** | `String` | Sets label title for dropdown |  |  |
+| **options** | `(String, String)` | Displays the list of dropdown options | |  |
+| **style** | `Variant` | Options for the state of dropdown | `.default` | `default` `disabled` `error` |
+| **selectedOption** | `String` | Changes selected value when new value is selected |  |  |
+| **selected** | `String` | Changes the value of the option selected in dropdown |  | |

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

@@ -28,3 +28,8 @@ examples:
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
+
+  swift:
+  - select_default_swift: Default
+  - select_error_swift: Error
+  - select_props_table: ""

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -28,7 +28,7 @@ type SelectableCardProps = {
   disabled?: boolean,
   error?: boolean,
   icon?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   inputId?: string,
   id?: string,
   multi?: boolean,

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx

@@ -22,7 +22,7 @@ type SelectableCardIconProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   disabled?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   inputId?: string,
   multi?: boolean,
@@ -33,7 +33,7 @@ type SelectableCardIconProps = {
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
 }
 
-const SelectableCardIcon = (props: SelectableCardIconProps) => {
+const SelectableCardIcon = (props: SelectableCardIconProps): React.ReactElement => {
   const {
     aria = {},
     checkmark = false,
@@ -70,36 +70,37 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       <SelectableCard
-        checked={checked}
-        customIcon={customIcon}
-        dark={dark}
-        disabled={disabled}
-        icon={checkmark}
-        inputId={inputId}
-        multi={multi}
-        name={name}
-        onChange={onChange}
-        value={value}
+          checked={checked}
+          customIcon={customIcon}
+          dark={dark}
+          disabled={disabled}
+          icon={checkmark}
+          inputId={inputId}
+          multi={multi}
+          name={name}
+          onChange={onChange}
+          value={value}
       >
         {
           <>
             <SelectableIcon
-              customIcon={customIcon}
-              icon={icon}
-              inputId={''}
-              inputs="disabled"
-              name={''}
-              text={titleText} />
+                customIcon={customIcon}
+                icon={icon}
+                inputId={''}
+                inputs="disabled"
+                name={''}
+                text={titleText}
+            />
             <Body
-              color="light"
-              dark={dark}
-              text={bodyText}
+                color="light"
+                dark={dark}
+                text={bodyText}
             />
           </>
         }

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

@@ -6,10 +6,11 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps 
+  buildHtmlProps
 } from '../utilities/props'
 import Icon from '../pb_icon/_icon'
 import Title from '../pb_title/_title'
+import { GenericObject } from '../types'
 
 type SelectableIconProps = {
   aria?: {[key: string]: string},
@@ -17,8 +18,8 @@ type SelectableIconProps = {
   className?: string,
   customIcon?: {[key: string] :SVGElement},
   disabled?: boolean,
-  data?: Object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: GenericObject,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon: string,
   inputId: string,
   inputs: string,
@@ -44,7 +45,7 @@ const SelectableIcon = ({
   text,
   value,
   ...props
-}: SelectableIconProps) => {
+}: SelectableIconProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -64,22 +65,22 @@ const SelectableIcon = ({
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       {inputs === 'disabled' && (
         <>
           <Icon
-            customIcon={customIcon}
-            icon={icon}
-            size="2x"
+              customIcon={customIcon}
+              icon={icon}
+              size="2x"
           />
           <Title
-            size={4}
-            tag="h4"
-            text={text}
+              size={4}
+              tag="h4"
+              text={text}
           />
         </>
       )}
@@ -87,24 +88,24 @@ const SelectableIcon = ({
       {inputs === 'enabled' && (
         <>
           <input
-            {...props}
-            checked={checked}
-            disabled={disabled}
-            id={inputIdPresent}
-            name={name}
-            type={inputType}
-            value={value}
+              {...props}
+              checked={checked}
+              disabled={disabled}
+              id={inputIdPresent}
+              name={name}
+              type={inputType}
+              value={value}
           />
           <label htmlFor={inputIdPresent}>
             <Icon
-              customIcon={customIcon}
-              icon={icon}
-              size="2x"
+                customIcon={customIcon}
+                icon={icon}
+                size="2x"
             />
             <Title
-              size={4}
-              tag="h4"
-              text={text}
+                size={4}
+                tag="h4"
+                text={text}
             />
           </label>
         </>

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -15,7 +15,7 @@ export type SelectableListItemProps = {
   className?: string;
   data?: object;
   defaultChecked?: boolean;
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   label?: string;
   text?: string;

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx

@@ -7,13 +7,14 @@ import { SelectableListItemProps } from './_item.js'
 
 import List from  '../pb_list/_list'
 import SelectableListItem from './_item'
+import { GenericObject } from '../types'
 
 type SelectableListProps = {
   aria?: {[key: string]: string },
   children?: React.ReactElement[],
   className?: string,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: GenericObject,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: 'checkbox' | 'radio',
 }