@ansible/ansible-ui-framework 0.0.190 → 0.0.192

package/README.md

@@ -0,0 +1,11 @@
+# Ansible UI Framework
+
+Framework for building web applications using PatternFly.
+
+Developed by the Ansible UI developers to make a consistent framework for build web applications using PatternFly.
+
+## Getting Started
+
+```
+npm install @ansible/ansible-ui-framework
+```

package/docs/Table-Guide.md

@@ -0,0 +1,208 @@
+# Table Guide
+
+- [Typescript Interface](#typescript-interface)
+- [Page layout](#page-layout)
+- [View](#view)
+- [Table Columns](#table-columns)
+- [Page Table](#page-table)
+- [Toolbar Filters](#toolbar-filters)
+- [Toolbar Actions](#toolbar-actions)
+- [Row Actions](#row-actions)
+
+## Typescript Interface
+
+```ts
+export interface IPerson {
+  name: string
+}
+```
+
+## Page layout
+
+The page layout enables the layout to be responsive - responding to different page sizes and adjusting padding and borders.
+
+```tsx
+export function Persons() {
+  return (
+    <PageLayout>
+      <PageHeader title="Persons" />
+      <PageBody>Table will go here</PageBody>
+    </PageLayout>
+  )
+}
+```
+
+## View
+
+Each table uses a view using a React hook. The view handles the state for the table. Sorting, filtering, pagination, etc...
+
+```tsx
+const view = useView()
+```
+
+For different backends, the view can be wrapped to make a specific view hook for the API.
+
+```tsx
+export function Persons() {
+  const view = useMyApiView<IPerson>({ url: '/api/persons' })
+  ...
+}
+```
+
+## Table Columns
+
+```tsx
+export function Persons() {
+  const view = useMyApiView<IPerson>({ url: '/api/persons' })
+  const tableColumns = useMemo<ITableColumn<IPerson>[]>(
+    () => [
+      {
+        header: 'Name',
+        cell: (person) => <TextCell text={person.name} />,
+        sort: 'name',
+      },
+    ],
+    []
+  )
+  ...
+}
+```
+
+## Page Table
+
+The PageTable component takes in the properties from the view and shows a table for the view using the columns.
+
+```tsx
+export function Persons() {
+  const view = useMyApiView<IPerson>({ url: '/api/persons' })
+  const tableColumns = useMemo<ITableColumn<IPerson>[]>(
+    () => [
+      {
+        header: 'Name',
+        cell: (person) => <TextCell text={person.name} />,
+        sort: 'name',
+      },
+    ],
+    []
+  )
+  return (
+    <PageLayout>
+      <PageHeader title="Persons" />
+      <PageBody>
+        <PageTable<IPerson> tableColumns={tableColumns} {...view} />
+      </PageBody>
+    </PageLayout>
+  )
+}
+```
+
+## Toolbar Filters
+
+Filters are specified using IToolbarFilter. The key is used for url querystring persistence. The query is used by the view to make the API call with the filter.
+
+```tsx
+export function Persons() {
+  const view = useMyApiView<IPerson>({ url: '/api/persons' })
+  const tableColumns = ...
+  const toolbarFilters = useMemo<IToolbarFilter[]>(
+    () => [
+      {
+        key: 'name',
+        label: 'Name',
+        type: 'string',
+        query: 'name',
+      },
+    ],
+    []
+  )
+  return (
+    <PageLayout>
+      <PageHeader title="Persons" />
+      <PageBody>
+        <PageTable<IPerson>
+          tableColumns={tableColumns}
+          toolbarFilters={toolbarFilters}
+          {...view} />
+      </PageBody>
+    </PageLayout>
+  )
+}
+```
+
+## Toolbar Actions
+
+Toolbar actions are specified using ITypedAction.
+
+```tsx
+export function Persons() {
+  const view = useMyApiView<IPerson>({ url: '/api/persons' })
+  const tableColumns = ...
+  const toolbarFilters = ...
+  const toolbarActions = useMemo<ITypedAction<IPerson>[]>(
+    () => [
+      {
+        type: TypedActionType.button,
+        variant: ButtonVariant.primary,
+        icon: PlusIcon,
+        label: 'Create person',
+        onClick: () => alert("TODO"),
+      },
+      {
+        type: TypedActionType.bulk,
+        icon: TrashIcon,
+        label: 'Deleted selected persons',
+        onClick: (persons) => alert("TODO"),
+      },
+    ],
+    []
+  )
+  return (
+    <PageLayout>
+      <PageHeader title="Persons" />
+      <PageBody>
+        <PageTable<IPerson>
+          tableColumns={tableColumns}
+          toolbarFilters={toolbarFilters}
+          toolbarActions={toolbarActions}
+          {...view} />
+      </PageBody>
+    </PageLayout>
+  )
+}
+```
+
+## Row Actions
+
+Row actions are specified using ITypedAction.
+
+```tsx
+export function Persons() {
+  const view = useMyApiView<IPerson>({ url: '/api/persons' })
+  const tableColumns = ...
+  const toolbarFilters = ...
+  const toolbarActions = ...
+  const rowActions = useMemo<IItemAction<Team>[]>(
+    () => [
+      {
+        icon: EditIcon,
+        label: 'Edit person',
+        onClick: (person) => alert("TODO"),
+      },
+    ],
+    [t]
+  )
+  return (
+    <PageLayout>
+      <PageHeader title="Persons" />
+      <PageBody>
+        <PageTable<IPerson>
+          tableColumns={tableColumns}
+          toolbarFilters={toolbarFilters}
+          toolbarActions={toolbarActions}
+          rowActions={rowActions}
+          {...view} />
+      </PageBody>
+    </PageLayout>
+  )
+}
+```

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "Framework for building web applications using PatternFly.",
-  "version": "0.0.190",
+  "version": "0.0.192",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/ansible/ansible-ui.git"
   },
-  "homepage": "https://github.com/ansible/ansible-ui/framework#readme",
+  "homepage": "https://github.com/ansible/ansible-ui/tree/main/framework#readme",
   "type": "module",
   "exports": {
     ".": {