playbook_ui_docs 13.15.0 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7ba9f12396d63760c5e3e46bb8449a7bafbc683738174da4e27b7018443f00f
-  data.tar.gz: 391e2efddde9d3139ca169a03e3fc019646cf8c96223189a85a54aec3b13a4e6
+  metadata.gz: 00c1929111233e767ace99abaffa4b4f401e2097e821abe3a238bb2f5fe0accd
+  data.tar.gz: 70fc62aa3dc5a347625184c7470a6316dea635808103186c204faa79e4f2f172
 SHA512:
-  metadata.gz: fcb20342385c140c16cf89f2f45ddb1aa6d1afeba3cb4d37fe46b35d8186c608ace38301203a3d9b30a52e7258419aed00130e3938648fa6e4feae5d53277397
-  data.tar.gz: 5c561cf3b8f363dfa11198ba70d1ce43249a02f51f0255e16e9f573a3ef040b1f72d9dc1ef3461a5a24fa395f2c8bdd2175e4eda9e458bb2a74ed62be788172c
+  metadata.gz: 37bb751dfddf5a51fd801df9b0baa0f03960568095f25939ffc2d86b1e6388767e685e3f805615b934838e2514fa081359f53164bbba3b7fd7024c850732121c
+  data.tar.gz: e93b6dcda9f10e3d9602f269014170e63bc6b256c2d32895e338f56bfd8705ed3260c9eb1104358d24e4ca94e7c04d6dea76253f6831682745bf8f7eaea7d3a2

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { AdvancedTable } from "../../";
+import { MOCK_DATA } from "./_mock_data";
+
+const AdvancedTableDefault = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default AdvancedTableDefault;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md

@@ -0,0 +1,13 @@
+The AdvancedTable kit takes the table data and automatically renders expandable subrows for nested items to any depth needed. In it's simplest form, the kit has two required props: 
+
+`tableData` is the data that the kit needs to consume to render the table. This data will take the structure of an array of objects where each object will be rendered as a row with the key/value pairs being the column values. If an object within that data has children, the kit will automatically create subRows with icon buttons on the parent rows to toggle the subRows open or closed. The toggleExpansionAll button in the first column header can also be used to toggle expansion for the top level parent rows. For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/blob/1b2481c06137d2bc63031a1120c1bd4d01bfd9ec/playbook/app/pb_kits/playbook/pb_advanced_table/README.md).
+
+
+`columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
+
+- `accessor`: this is the key from your data for the value you want rendered in that column
+- `label`: this is what will be rendered as the column header label
+
+There is also one optional item that is only required if the table has nested data: 
+
+- `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.

data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md

@@ -0,0 +1 @@
+The AdvancedTable kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js

@@ -0,0 +1,278 @@
+export const MOCK_DATA = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    attendanceRate: "51%",
+    completedClasses: "3",
+    classCompletionRate: "33%",
+    graduatedStudents: "19",
+    children: [
+      {
+        year: "2021",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "20",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "February",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "February",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
+    children: [
+      {
+        year: "2022",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "15",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "25",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "May",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "May",
+                day: "2",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "10",
+    scheduledMeetings: "15",
+    attendanceRate: "65%",
+    completedClasses: "4",
+    classCompletionRate: "49%",
+    graduatedStudents: "29",
+    children: [
+      {
+        year: "2023",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "March",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "11",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "April",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "April",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];

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

@@ -0,0 +1,5 @@
+examples:
+  react:
+  - advanced_table_default: Default
+  
+  

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

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

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md

@@ -0,0 +1,27 @@
+![collapsible-colors](https://github.com/powerhome/playbook/assets/54749071/daafd129-fd0a-4992-8fee-bfa55aed8a23)
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+       VStack(spacing: Spacing.medium) {
+            CollapsibleDoc(iconColor: .default, text: "Default Section")
+            CollapsibleDoc(iconColor: .light, text: "Light Section")
+            CollapsibleDoc(iconColor: .lighter, text: "Lighter Section")
+            CollapsibleDoc(iconColor: .link, text: "Link Section")
+            CollapsibleDoc(iconColor: .error, text: "Error Section")
+            CollapsibleDoc(iconColor: .success, text: "Success Section")
+          }
+      } content: {
+       Text(lorem).pbFont(.body)
+      }
+
+```

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md

@@ -0,0 +1,22 @@
+![collapsible-default](https://github.com/powerhome/playbook/assets/54749071/3e97095b-f6bb-45b7-bd33-99ebde0d40fd)
+
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+        CollapsibleDoc(text: "Main Section")
+      } content: {
+        Text(lorem).pbFont(.body)
+      }
+
+```

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_props_table.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **isCollapsed** | `Bool` | Value for whether or not the dropdown is closed or open | `false` | `true` `false` |
+| **headerView** | `View` | Title of dropdown |  | |
+| **contentView** | `View` | Content of dropdown |  |  |
+| **iconSize** | `PBIcon.IconSize` | Sets size of chevron icon | `.small`  | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **iconColor** | `CollapsibleIconColor` | Sets color of chevron icon | `.default` | `default` `light` `lighter` `link` `error` `success`  |

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_sizes_swift.md

@@ -0,0 +1,26 @@
+![collapsible-sizes](https://github.com/powerhome/playbook/assets/54749071/557bfe16-26e4-4966-9f1c-689a2dc44412)
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+      VStack(spacing: Spacing.medium) {
+            CollapsibleDoc(iconSize: .xSmall, text: "Extra Small Section")
+            CollapsibleDoc(iconSize: .small, text: "Small Section")
+            CollapsibleDoc(text: "Default Section")
+            CollapsibleDoc(iconSize: .large, text: "Large Section")
+          }
+      } content: {
+       Text(lorem).pbFont(.body)
+      }
+
+```

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

@@ -14,3 +14,9 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
+
+  swift:
+  - collapsible_default_swift: Default
+  - collapsible_sizes_swift: Sizes
+  - collapsible_colors_swift: Colors
+  - collapsible_props_table: ""

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md

@@ -0,0 +1,17 @@
+![nav-horizontal-bold](https://github.com/powerhome/playbook/assets/54749071/f55f31c5-dbf9-40e2-9f08-6a075c7cb56b)
+
+```swift
+@State private var selectedHBold: Int = 1
+
+PBNav(
+        selected: $selectedHBold,
+        variant: .bold,
+        orientation: .horizontal,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md

@@ -0,0 +1,17 @@
+![nav-horizontal-default](https://github.com/powerhome/playbook/assets/54749071/8731ad83-322f-43f8-8459-76bc425ba30f)
+
+```swift
+ @State private var selectedHDefault: Int = 1
+
+ PBNav(
+          selected: $selectedHDefault,
+          variant: .normal,
+          orientation: .horizontal
+        ) {
+          PBNavItem("Photos")
+          PBNavItem("Music")
+          PBNavItem("Video")
+          PBNavItem("Files")
+        }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md

@@ -0,0 +1,18 @@
+![nav-horizontal-subtle-no-highlight](https://github.com/powerhome/playbook/assets/54749071/ee79fb55-8d5b-46b0-89aa-a310bf48dd19)
+
+```swift
+@State private var selectedHSubtleNoHighlight: Int = 1
+
+ PBNav(
+        selected: $selectedHSubtleNoHighlight,
+        variant: .subtle,
+        orientation: .horizontal,
+        borders: false,
+        highlight: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_swift.md

@@ -0,0 +1,18 @@
+![nav-horizontal-subtle](https://github.com/powerhome/playbook/assets/54749071/e595cf20-f145-4e47-bb9a-d8dcdc217af7)
+
+```swift
+@State private var selectedHSubtle: Int = 1
+
+PBNav(
+        selected: $selectedHSubtle,
+        variant: .subtle,
+        orientation: .horizontal,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **selected** | `Int` | Sets selected to current index | `0` |  |
+| **currentHover** | `Int?` | Sets the current hover state to the current index|  |  |
+| **variant** | `Variant` | Sets variant for nav | `.normal` | `normal` `subtle` `bold` |
+| **orientation** | `Orientation` | Changes the orientation of nav | `.vertical` | `horizontal` `verticle` |
+| **title** | `String?` | Sets title of nav |  |  |
+| **borders** | `Bool` | Boolean value for whether nav items have a border or not | `true` | `true` `false` |
+| **highlight** | `Bool` | Boolean value for adding a highlight to nav | `true` | `true` `false` |
+| **views** | `[AnyView]` | An Array of AnyView |  |  |

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md

@@ -0,0 +1,18 @@
+![nav-vertical-bold](https://github.com/powerhome/playbook/assets/54749071/4d9ea3b7-c2e8-4703-80e3-54e4cee8dbfc)
+
+```swift
+ @State private var selectedVBold: Int = 1
+
+PBNav(
+        selected: $selectedVBold,
+        variant: .bold,
+        orientation: .vertical,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_default_swift.md

@@ -0,0 +1,18 @@
+![nav-vertical-default](https://github.com/powerhome/playbook/assets/54749071/ddbf0c77-4d98-483e-9f12-561ac169e6a9)
+
+```swift
+@State private var selectedVDefault: Int = 1
+
+PBNav(
+        selected: $selectedVDefault,
+        variant: .normal,
+        orientation: .vertical,
+        title: "Menu"
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_no_highlight_swift.md

@@ -0,0 +1,19 @@
+![nav-vertical-subtle_no-highlight](https://github.com/powerhome/playbook/assets/54749071/3f6d5773-6aa4-4ea1-a0b2-948e4325a311)
+
+```swift
+@State private var selectedVSubtleNoHighlight: Int = 1
+
+PBNav(
+        selected: $selectedVSubtleNoHighlight,
+        variant: .subtle,
+        orientation: .vertical,
+        borders: false,
+        highlight: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_swift.md

@@ -0,0 +1,17 @@
+![nav-vertical-subtle](https://github.com/powerhome/playbook/assets/54749071/06a30a15-661a-4779-a674-7b4e6cded472)
+
+```swift
+@State private var selectedVSubtle: Int = 1
+
+PBNav(
+        selected: $selectedVSubtle,
+        variant: .subtle,
+        orientation: .vertical,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```

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

@@ -42,3 +42,20 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
+
+  swift:
+  - nav_vertical_default_swift: Vertical Default
+  - nav_vertical_subtle_swift: Vertical Subtle
+  - nav_vertical_subtle_no_highlight_swift: Vertical Subtle No Highlight
+  - nav_vertical_bold_swift: Vertical Bold
+  - nav_horizontal_default_swift: Horizontal Default
+  - nav_horizontal_subtle_swift: Horizontal Subtle
+  - nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
+  - nav_horizontal_bold_swift: Horizontal Bold
+  - nav_props_swift: ""
+
+
+
+  
+
+