playbook_ui 13.34.1.pre.alpha.pbntr258paginationkitforreact3413 → 13.34.1.pre.alpha.play1447addrequiredicons3451

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.34.1"
-  VERSION = "13.34.1.pre.alpha.pbntr258paginationkitforreact3413"
+  VERSION = "13.34.1.pre.alpha.play1447addrequiredicons3451"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.34.1.pre.alpha.pbntr258paginationkitforreact3413
+  version: 13.34.1.pre.alpha.play1447addrequiredicons3451
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-08-08 00:00:00.000000000 Z
+date: 2024-08-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1919,15 +1919,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_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
@@ -2979,6 +2973,10 @@ 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
@@ -2997,8 +2995,8 @@ 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-COUJ88EA.js
-- dist/chunks/_weekday_stacked-Im-AfPJB.js
+- dist/chunks/_typeahead-zwiADeyt.js
+- dist/chunks/_weekday_stacked-B98BDKdo.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-Bf_E03gc.js
 - dist/chunks/pb_form_validation-D0dhqeN2.js

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

@@ -1,134 +0,0 @@
-import React, { useState } from "react";
-import Icon from '../pb_icon/_icon';
-
-type PaginationProps = {
-  current?: number;
-  onChange?: (pageNumber: number) => void;
-  range?: number;
-  total?: number;
-};
-
-const Pagination = ({
-  current = 1,
-  onChange,
-  range = 5,
-  total = 1,
-}: PaginationProps) => {
-  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(
-        <button
-            className="pagination-number"
-            key={1}
-            onClick={() => handlePageChange(1)}
-        >
-          1
-        </button>
-      );
-    }
-  
-    // Always display the second page button
-    if (rangeStart > 2) {
-      buttons.push(
-        <button
-            className="pagination-number"
-            key={2}
-            onClick={() => handlePageChange(2)}
-        >
-          2
-        </button>
-      );
-    }
-
-    // Display page buttons within the calculated range
-    for (let i = rangeStart; i <= rangeEnd; i++) {
-      buttons.push(
-        <button
-            className={`pagination-number ${i === currentPage ? "active" : ""}`}
-            key={i}
-            onClick={() => handlePageChange(i)}
-        >
-          {i}
-        </button>
-      );
-    }
-
-    // Always display the second-to-last page button
-    if (rangeEnd < total - 1) {
-      buttons.push(
-        <button
-            className={`pagination-number ${total - 1 === currentPage ? "active" : ""}`}
-            key={total - 1}
-            onClick={() => handlePageChange(total - 1)}
-        >
-          {total - 1}
-        </button>
-      );
-    }
-
-    // Always display the last page button
-    if (rangeEnd < total) {
-      buttons.push(
-        <button
-            className={`pagination-number ${total === currentPage ? "active" : ""}`}
-            key={total}
-            onClick={() => handlePageChange(total)}
-        >
-          {total}
-        </button>
-      );
-    }
-
-    return buttons;
-  };
-  
-
-  return (
-    <div className="pb_pagination">
-      <button
-          className="pagination-left"
-          disabled={currentPage === 1}
-          onClick={() => handlePageChange(currentPage - 1)}
-      >
-        <Icon icon="chevron-left" />
-      </button>
-      {renderPageButtons()}
-      <button
-          className="pagination-right"
-          disabled={currentPage === total}
-          onClick={() => handlePageChange(currentPage + 1)}
-      >
-        <Icon icon="chevron-right" />
-      </button>
-    </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_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 `onPageChange` prop to control the data of your table. This prop is callback function that will allow you control the state.

data/app/pb_kits/playbook/pb_pagination/docs/data.js

@@ -1,23 +0,0 @@
-export const data = [
-    ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
-    ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
-    ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
-    ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
-    ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
-    ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
-    ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
-    ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
-    ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
-    ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
-    ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
-    ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
-    ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
-    ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
-    ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
-    ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
-    ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
-    ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
-    ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
-    ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
-  ];
-  

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

@@ -1,2 +0,0 @@
-export { default as PaginationDefault } from './_pagination_default.jsx'
-export { default as PaginationPageChange } from './_pagination_page_change.jsx'