RubyGems - playbook_ui - Versions diffs - 14.15.0.pre.alpha.PBNTR477draggabledropzone6743 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700 - Mend

playbook_ui 14.15.0.pre.alpha.PBNTR477draggabledropzone6743 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (378) hide show

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx CHANGED Viewed

@@ -1,9 +1,6 @@
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import Button from '../../pb_button/_button'
-import Checkbox from '../../pb_checkbox/_checkbox'
-import Flex from '../../pb_flex/_flex'
-import Body from '../../pb_body/_body'
+import { Button, Checkbox, Flex, Body } from "playbook-ui"
 const CheckboxReactHook = () => {
   const { register, handleSubmit } = useForm({

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react'
 import CircleChart from '../_circle_chart'
-import Title from '../../pb_title/_title'
+import {Title} from 'playbook-ui'
 const data = [
   {

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
+import { CircleIconButton } from 'playbook-ui'
 const CircleIconButtonClick = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx CHANGED Viewed

@@ -1,12 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Flex from '../../pb_flex/_flex'
-import Title from '../../pb_title/_title'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx CHANGED Viewed

@@ -1,12 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Flex from '../../pb_flex/_flex'
-import Title from '../../pb_title/_title'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleDefault = (props) => (
   <Collapsible >

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleIcons = (props) => {

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleNoIcon = (props) => (
   <Collapsible

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx CHANGED Viewed

@@ -1,9 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Button from '../../pb_button/_button'
+import { Collapsible, useCollapsible, Button } from 'playbook-ui'
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Contact from "../../pb_contact/_contact"
+import { Contact } from 'playbook-ui'
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Contact from "../../pb_contact/_contact"
+import { Contact } from 'playbook-ui'
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from 'react'
-import CopyButton from '../../pb_copy_button/_copy_button'
-import Textarea from '../../pb_textarea/_textarea'
+import { CopyButton, Textarea } from 'playbook-ui'
 const CopyButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx CHANGED Viewed

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-import CopyButton from '../../pb_copy_button/_copy_button'
-import Body from '../../pb_body/_body'
-import TextInput from '../../pb_text_input/_text_input'
-import Textarea from '../../pb_textarea/_textarea'
+import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
 const CopyButtonFrom = (props) => {
   const [text, setText] = useState("Copy this text input text")

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Currency from "../../pb_currency/_currency"
+import { Currency } from 'playbook-ui'
 const CurrencyNullDisplay = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from 'react'
-import Currency from '../../pb_currency/_currency'
-import Title from '../../pb_title/_title'
+import { Currency, Title } from 'playbook-ui'
 const CurrencyUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
-import FormattedDate from '../../pb_date/_date'
+import { Date as FormattedDate } from 'playbook-ui'
 const DateAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React from 'react'
-import FormattedDate from '../../pb_date/_date'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
+import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
 const DateDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React from 'react'
-import Caption from '../../pb_caption/_caption'
-import FormattedDate from '../../pb_date/_date'
-import Title from '../../pb_title/_title'
+import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
-import FormattedDate from '../../pb_date/_date'
+import { Date as FormattedDate } from 'playbook-ui'
 const DateVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import DatePicker from '../../pb_date_picker/_date_picker'
-import LabelValue from '../../pb_label_value/_label_value'
+import { DatePicker, LabelValue } from 'playbook-ui'
 const DatePickerOnChange = (props) => {
   const today = new Date()

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx CHANGED Viewed

@@ -1,8 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-import DatePicker from '../../pb_date_picker/_date_picker'
-import LabelValue from '../../pb_label_value/_label_value'
+import { DatePicker,LabelValue } from 'playbook-ui'
 const DatePickerOnClose = (props) => {

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateRangeStacked from '../../pb_date_range_stacked/_date_range_stacked'
+import { DateRangeStacked } from 'playbook-ui'
 const DateRangeStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateYearStacked from '../../pb_date_year_stacked/_date_year_stacked'
+import { DateYearStacked } from 'playbook-ui'
 const DateYearStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 const DetailBold = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 const DetailColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 const DetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 const DetailStyled = (props) => (
   <>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx CHANGED Viewed

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Caption from '../../pb_caption/_caption'
-import Dialog from '../../pb_dialog/_dialog'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  RichTextEditor,
+  Typeahead,
+} from 'playbook-ui'
 const DialogCompound = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED Viewed

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
-import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "playbook-ui";
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED Viewed

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
-import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "playbook-ui";
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 const DialogLoading = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 const DialogScrollable = () => {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex } from 'playbook-ui'
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx CHANGED Viewed

@@ -1,8 +1,6 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex } from 'playbook-ui'
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx CHANGED Viewed

@@ -1,8 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex} from "playbook-ui"
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx CHANGED Viewed

@@ -1,10 +1,7 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex } from "playbook-ui"
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_docs/kit_example.rb CHANGED Viewed

@@ -60,20 +60,6 @@ module Playbook
                                            .gsub("'../..'", "'playbook-ui'")
                                            .gsub(%r{from "../.*}, "from 'playbook-ui'")
                                            .gsub(%r{from '../.*}, "from 'playbook-ui'")
-        stringified_code = stringified_code.gsub(/import\s+(\w+)\s+from\s+['"]playbook-ui['"]/) do
-          "import { #{::Regexp.last_match(1)} } from 'playbook-ui'"
-        end
-        stringified_code = stringified_code.gsub("import { FormattedDate }", "import { Date as FormattedDate }")
-        # Combine separate playbook-ui import statements into one
-        imports = stringified_code.scan(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/)
-        components = imports.flatten.join(", ").split(",").map(&:strip).uniq
-        if components.any?
-          new_import_statement = "import { #{components.join(', ')} } from 'playbook-ui'"
-          stringified_code.gsub!(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/, "")
-          stringified_code = stringified_code.sub(/import\s+React[\s\S]+?\n/, "\\0\n#{new_import_statement}")
-        end
-        # Replace several empty lines with one empty line
-        stringified_code.gsub!(/\n\s*\n{2,}/, "\n\n")
         stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
         if stringified_code.include?("props: { ")
           stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark