playbook_ui 14.1.0.pre.alpha.PLAY15063617 → 14.1.0.pre.alpha.fixaction3547

data/lib/playbook/classnames.rb

@@ -13,7 +13,6 @@ module Playbook
         prop(:classname),
         spacing_props,
         dark_props,
-        min_width_props,
         max_width_props,
         z_index_props,
         number_spacing_props,

data/lib/playbook/spacing.rb

@@ -11,7 +11,6 @@ module Playbook
       base.prop :margin_x
       base.prop :margin_y
       base.prop :max_width
-      base.prop :min_width
       base.prop :padding
       base.prop :padding_bottom
       base.prop :padding_left
@@ -27,18 +26,8 @@ module Playbook
       }
     end
 
-    def min_width_options
-      {
-        min_width: "minw",
-      }
-    end
-
     def max_width_values
-      %w[0% xs sm md lg xl xxl 0 none 100%]
-    end
-
-    def min_width_values
-      %w[0% xs sm md lg xl xxl 0 none 100%]
+      %w[xs sm md lg xl xxl 0 none]
     end
 
     def spacing_options
@@ -98,31 +87,13 @@ module Playbook
       css.strip unless css.blank?
     end
 
-    def filter_classname(value)
-      if value.include?("%")
-        value.gsub("%", "_percent")
-      else
-        value
-      end
-    end
-
-    def min_width_props
-      selected_minw_props = min_width_options.keys.select { |sk| try(sk) }
-      return nil unless selected_minw_props.present?
-
-      selected_minw_props.map do |k|
-        width_value = send(k)
-        "min_width_#{filter_classname(width_value)}" if min_width_values.include? width_value
-      end.compact.join(" ")
-    end
-
     def max_width_props
       selected_mw_props = max_width_options.keys.select { |sk| try(sk) }
       return nil unless selected_mw_props.present?
 
       selected_mw_props.map do |k|
         width_value = send(k)
-        "max_width_#{filter_classname(width_value)}" if max_width_values.include? width_value
+        "max_width_#{width_value}" if max_width_values.include? width_value
       end.compact.join(" ")
     end
   end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.1.0"
-  VERSION = "14.1.0.pre.alpha.PLAY15063617"
+  VERSION = "14.1.0.pre.alpha.fixaction3547"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.1.0.pre.alpha.PLAY15063617
+  version: 14.1.0.pre.alpha.fixaction3547
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-08-28 00:00:00.000000000 Z
+date: 2024-08-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -73,14 +73,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.83.0
+        version: 2.55.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.83.0
+        version: 2.55.0
 - !ruby/object:Gem::Dependency
   name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
@@ -1045,7 +1045,6 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md
-- app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_props_swift.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
@@ -1346,12 +1345,6 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/index.js
 - app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
 - app/pb_kits/playbook/pb_form_pill/form_pill.rb
-- app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss
-- app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx
-- app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx
-- app/pb_kits/playbook/pb_gantt_chart/docs/example.yml
-- app/pb_kits/playbook/pb_gantt_chart/docs/index.js
-- app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx
 - app/pb_kits/playbook/pb_gauge/_gauge.scss
 - app/pb_kits/playbook/pb_gauge/_gauge.tsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
@@ -1935,16 +1928,9 @@ files:
 - app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_percentage.tsx
 - app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx
 - app/pb_kits/playbook/pb_pagination/_pagination.scss
-- app/pb_kits/playbook/pb_pagination/_pagination.tsx
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
-- app/pb_kits/playbook/pb_pagination/docs/data.js
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
 - app/pb_kits/playbook/pb_pagination/docs/example.yml
-- app/pb_kits/playbook/pb_pagination/docs/index.js
 - app/pb_kits/playbook/pb_pagination/pagination.html.erb
 - app/pb_kits/playbook/pb_pagination/pagination.rb
 - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
@@ -2167,7 +2153,6 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/_dedupe_trix_toolbar.js
-- app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss
@@ -2175,7 +2160,6 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
@@ -2940,7 +2924,6 @@ files:
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
-- app/pb_kits/playbook/tokens/_container.scss
 - app/pb_kits/playbook/tokens/_display.scss
 - app/pb_kits/playbook/tokens/_line_height.scss
 - app/pb_kits/playbook/tokens/_opacity.scss
@@ -2977,7 +2960,6 @@ files:
 - app/pb_kits/playbook/utilities/_hover.scss
 - app/pb_kits/playbook/utilities/_line_height.scss
 - app/pb_kits/playbook/utilities/_max_width.scss
-- app/pb_kits/playbook/utilities/_min_width.scss
 - app/pb_kits/playbook/utilities/_mixins.scss
 - app/pb_kits/playbook/utilities/_number_spacing.scss
 - app/pb_kits/playbook/utilities/_overflow.scss
@@ -3000,10 +2982,6 @@ files:
 - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
 - app/pb_kits/playbook/utilities/globalPropNames.mjs
 - app/pb_kits/playbook/utilities/globalProps.ts
-- app/pb_kits/playbook/utilities/icons/allicons.tsx
-- app/pb_kits/playbook/utilities/icons/clock.svg
-- app/pb_kits/playbook/utilities/icons/spinner.svg
-- app/pb_kits/playbook/utilities/icons/times.svg
 - app/pb_kits/playbook/utilities/object.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
@@ -3022,11 +3000,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-Cq7RLPBA.js
-- dist/chunks/_weekday_stacked-Cykj5kLZ.js
+- dist/chunks/_typeahead-D-4y9pbv.js
+- dist/chunks/_weekday_stacked-D5SswkOC.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-DErGXNy3.js
-- dist/chunks/pb_form_validation-BC6kh7Hu.js
+- dist/chunks/lib-BE0Z3F7x.js
+- dist/chunks/pb_form_validation-TzZQ0Flx.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

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

@@ -1,46 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
-
-const DialogLoading = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const close = () => {
-    if (!isLoading) {
-      setIsOpen(false)
-    }
-  }
-  const open = () => setIsOpen(true)
-  const [isLoading, setIsLoading] = useState(false)
-  const submit = async () => {
-    setIsLoading(true)
-
-    try {
-      await new Promise((r) => setTimeout(r, 3000))
-      setIsOpen(false)
-    } catch (error) {
-      console.error("An error occurred.")
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  return (
-    <>
-      <Button onClick={open}>{'Open Dialog'}</Button>
-      <Dialog
-          cancelButton="Cancel"
-          className="wrapper"
-          confirmButton="Okay"
-          loading={isLoading}
-          onCancel={close}
-          onClose={close}
-          onConfirm={submit}
-          opened={isOpen}
-          size="sm"
-          text="Make a 3 second request?"
-          title="Loading Example"
-      />
-    </>
-  )
-}
-
-export default DialogLoading

data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss

@@ -1,3 +0,0 @@
-.pb_gantt_chart {
-
-}

data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx

@@ -1,72 +0,0 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
-import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts/highcharts-gantt";
-
-import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
-
-type GanttChartProps = {
-  aria?: { [key: string]: string };
-  className?: string;
-  customOptions: Partial<Highcharts.Options>;
-  dark?: boolean;
-  data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-};
-
-const GanttChart = (props: GanttChartProps) => {
-  const {
-    aria = {},
-    className,
-    customOptions = {},
-    dark = false,
-    data = {},
-    htmlOptions = {},
-    id,
-  } = props;
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(
-    buildCss("pb_gantt_chart"),
-    globalProps(props),
-    className
-  );
-
-  const [options, setOptions] = useState<Highcharts.Options | undefined>(customOptions);
-
-  useEffect(() => {
-    setOptions(customOptions);
-  }, [customOptions]);
-
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  return (
-    <div>
-      <HighchartsReact
-          constructorType={"ganttChart"}
-          containerProps={{
-            className: classnames(globalProps(props), classes),
-            id: id,
-            ...ariaProps,
-            ...dataProps,
-            ...htmlProps,
-          }}
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GanttChart;

data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx

@@ -1,53 +0,0 @@
-import React from "react";
-import { GanttChart } from "playbook-ui";
-
-const mockOptions = {
-  title: {
-    text: "Simple Gantt Chart",
-  },
-
-  xAxis: [
-    {
-      min: Date.UTC(2014, 10, 17),
-      max: Date.UTC(2014, 10, 30),
-    },
-  ],
-
-  series: [
-    {
-      name: "Project 1",
-      data: [
-        {
-          name: "Start prototype",
-          start: Date.UTC(2014, 10, 18),
-          end: Date.UTC(2014, 10, 25),
-        },
-        {
-          name: "Develop",
-          start: Date.UTC(2014, 10, 20),
-          end: Date.UTC(2014, 10, 25),
-        },
-        {
-          name: "Run acceptance tests",
-          start: Date.UTC(2014, 10, 23),
-          end: Date.UTC(2014, 10, 26),
-        },
-        {
-          name: "Test prototype",
-          start: Date.UTC(2014, 10, 27),
-          end: Date.UTC(2014, 10, 29),
-        },
-      ],
-    },
-  ],
-};
-
-const GanttChartDefault = (props) => (
-  <div>
-    <GanttChart customOptions={mockOptions} 
-        {...props} 
-    />
-  </div>
-);
-
-export default GanttChartDefault;

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

@@ -1,7 +0,0 @@
-examples:
-  
-  
-  react:
-  - gantt_chart_default: Default
-  
-  

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

@@ -1 +0,0 @@
-export { default as GanttChartDefault } from './_gantt_chart_default.jsx'

data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx

@@ -1,19 +0,0 @@
-// import { renderKit } from '../utilities/test-utils'
-
-// import GanttChart from './_gantt_chart'
-
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
-
-test('generated scaffold test - update me', () => {
-  // const props = {
-  //   data: { testid: 'default' }
-  // }
-
-
-  // const kit = renderKit(GanttChart , props)
-  // expect(kit).toBeInTheDocument()
-})
-

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,164 +0,0 @@
-import React, { useState } from "react";
-import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import Icon from '../pb_icon/_icon';
-
-type PaginationProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  current?: number;
-  onChange?: (pageNumber: number) => void;
-  range?: number;
-  total?: number;
-};
-
-const Pagination = ( props: PaginationProps) => {
-  const {
-    aria = {},
-    className,
-    data = {},
-    htmlOptions = {},
-    id,
-    current = 1,
-    onChange,
-    range = 5,
-    total = 1,
-  } = props
-  const [currentPage, setCurrentPage] = useState(current);
-
-  const handlePageChange = (pageNumber: number) => {
-    if (pageNumber >= 1 && pageNumber <= total) {
-      setCurrentPage(pageNumber);
-      if (onChange) {
-        onChange(pageNumber);
-      }
-    }
-  };
-
-  const renderPageButtons = (): JSX.Element[] => {
-    const buttons: JSX.Element[] = [];
-  
-    // Calculate pagination range with let
-    let rangeStart = Math.max(1, currentPage - Math.floor(range / 2));
-    let rangeEnd = Math.min(total, rangeStart + range - 1);
-  
-    // Adjust range if it's too short to fit the range
-    if (rangeEnd - rangeStart + 1 < range) {
-      if (rangeStart > 1) {
-        rangeStart = Math.max(1, rangeEnd - range + 1);
-      } else {
-        rangeEnd = Math.min(total, rangeStart + range - 1);
-      }
-    }
-
-    // Always display the first page button
-    if (rangeStart > 1) {
-      buttons.push(
-        <li
-            className="pagination-number"
-            key={1}
-            onClick={() => handlePageChange(1)}
-        >
-          1
-        </li>
-      );
-    }
-  
-    // Always display the second page button
-    if (rangeStart > 2) {
-      buttons.push(
-        <li
-            className="pagination-number"
-            key={2}
-            onClick={() => handlePageChange(2)}
-        >
-          2
-        </li>
-      );
-    }
-
-    // Display page buttons within the calculated range
-    for (let i = rangeStart; i <= rangeEnd; i++) {
-      buttons.push(
-        <li
-            className={`pagination-number ${i === currentPage ? "active" : ""}`}
-            key={i}
-            onClick={() => handlePageChange(i)}
-        >
-          {i}
-        </li>
-      );
-    }
-
-    // Always display the second-to-last page button
-    if (rangeEnd < total - 1) {
-      buttons.push(
-        <li
-            className={`pagination-number ${total - 1 === currentPage ? "active" : ""}`}
-            key={total - 1}
-            onClick={() => handlePageChange(total - 1)}
-        >
-          {total - 1}
-        </li>
-      );
-    }
-
-    // Always display the last page button
-    if (rangeEnd < total) {
-      buttons.push(
-        <li
-            className={`pagination-number ${total === currentPage ? "active" : ""}`}
-            key={total}
-            onClick={() => handlePageChange(total)}
-        >
-          {total}
-        </li>
-      );
-    }
-
-    
-    return buttons;
-  };
-  
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(
-    buildCss('pb_paginate'),
-    globalProps(props),
-    className
-  )
-
-  return (
-    <div 
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
-    >
-      <div className="pb_pagination">
-        <li
-            className={`pagination-left ${currentPage === 1 ? 'disabled' : ''}`}
-            onClick={() => handlePageChange(currentPage - 1)}
-        >
-          <Icon icon="chevron-left" />
-        </li>
-        {renderPageButtons()}
-        <li
-            className={`pagination-right ${currentPage === total ? 'disabled' : ''}`}
-            onClick={() => handlePageChange(currentPage + 1)}
-        >
-          <Icon icon="chevron-right" />
-        </li>
-      </div>
-    </div>
-  );
-};
-
-export default Pagination;

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import Pagination from '../_pagination'
-
-const PaginationDefault = (props) => {
-
-    return (
-      <>
-        <Pagination
-            current={1}
-            range={5}
-            total={10}
-            {...props}
-          />
-      </>
-    )
-}
-
-export default PaginationDefault

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md

@@ -1 +0,0 @@
-The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import { Table, Pagination } from 'playbook-ui'
-
-
-import { data } from "./data";
-
-const PaginationPageChange = (props) => {
-
-  const [activePage, setActivePage] = useState(1);
-  const rowsPerPage = 3;
-  const totalPages = Math.ceil(data.length / rowsPerPage);
-
-  const onPageChange = (pageNumber) => {
-    setActivePage(pageNumber);
-  };
-
-  const currentData = data.slice(
-    (activePage - 1) * rowsPerPage,
-    activePage * rowsPerPage
-  );
-
-
-    return (
-      <div className="App">
-      <Table 
-          marginBottom="xs"
-          responsive="none" 
-          size="sm" 
-          {...props}
-      >
-        <Table.Head>
-          <Table.Row>
-            <Table.Header>{"Column 1"}</Table.Header>
-            <Table.Header>{"Column 2"}</Table.Header>
-            <Table.Header>{"Column 3"}</Table.Header>
-            <Table.Header>{"Column 4"}</Table.Header>
-            <Table.Header>{"Column 5"}</Table.Header>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          {currentData.map((row, index) => (
-            <Table.Row key={index}>
-              {row.map((cell, cellIndex) => (
-                <Table.Cell key={cellIndex}>{cell}</Table.Cell>
-              ))}
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
- 
-      <Pagination
-          current={1}
-          onChange={onPageChange}
-          range={5}
-          total={totalPages}
-          {...props}
-      />
-    </div>
-    )
-}
-
-export default PaginationPageChange

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md

@@ -1 +0,0 @@
-You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.