@ansible/ansible-ui-framework 0.0.428 → 0.0.449

package/docs/guides/GettingStarted.md

@@ -1,90 +0,0 @@
-[Ansible UI Framework](../Framework.md) ▸ [Guides](../Guides.md) ▸ Getting Started
-
-# Getting Started
-
-## Install the NPM package
-
-NPM Package: [@ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
-
-```
-npm install @ansible/ansible-ui-framework
-```
-
-## Add the PageFramework to your application
-
-Near the top of your application add the [PageFramework](../components/PageFramework.md) component.
-
-This component adds the state management needed by the framework.
-
-## Use the framework in your application pages
-
-### Use PageLayout to control the layout in your pages
-
-The [PageLayout](../components/PageLayout.md) is used as the container for the contents of the page. It enables page components to leverage full page layout and scrolling of sub content. An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
-
-```tsx
-<Page>
-  <PageLayout>
-    <PageHeader ... />
-    ...
-  </PageLayout>
-</Page>
-```
-
-### Use PageHeader for the heading of your pages
-
-The [PageHeader](../components/PageHeader.md) is used at the top of each page. It provides a consistent layout of header elements.
-
-```tsx
-<Page>
-  <PageLayout>
-    <PageHeader ... />
-    ...
-  </PageLayout>
-</Page>
-```
-
-### Add content to the page
-
-#### Table Pages
-
-For pages containing a table, use the [PageTable](../components/PageTable.md) component. The PageTable support table, list, and card views of the data.
-
-```tsx
-<Page>
-  <PageLayout>
-    <PageHeader ... />
-    <PageTable ... />
-  </PageLayout>
-</Page>
-```
-
-<!-- #### Form Pages
-
-For pages containing an input form, use the [PageForm](../componentsPageForm.md) component.
-
-```tsx
-<Page>
-  <PageLayout>
-    <PageHeader ... />
-    <PageForm ... />
-  </PageLayout>
-</Page>
-```
-
-#### Detail Pages
-
-TODO
-
-#### Page sub navigation
-
-TODO -->
-
-### Other Useful Components
-
-<!-- - [PageAlertToaster](../componentsPageAlertToaster.md) -->
-
-- [BulkActionDialog](../components/BulkActionDialog.md)
-  <!-- - [BulkConfirmationDialog](../componentsBulkConfirmationDialog.md) -->
-  <!-- - [SelectDialog](../componentsSelectDialog.md) -->
-  <!-- - [SelectMultipleDialog](../componentsSelectMultipleDialog.md) -->

package/docs/guides/PageTableGuide.md

@@ -1,178 +0,0 @@
-[Ansible UI Framework](../Framework.md) ▸ [Guides](../Guides.md) ▸ PageTable
-
-# PageTable Guide
-
-## 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 Users() {
-  const view = useMyApiView<IUser>({ url: '/api/users' })
-  ...
-}
-```
-
-## Table Columns
-
-```tsx
-export function Users() {
-  const view = useMyApiView<IUser>({ url: '/api/users' })
-  const tableColumns = useMemo<ITableColumn<IUser>[]>(
-    () => [
-      {
-        header: 'Name',
-        cell: (user) => <TextCell text={user.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 Users() {
-  const view = useMyApiView<IUser>({ url: '/api/users' });
-  const tableColumns = useMemo<ITableColumn<IUser>[]>(
-    () => [
-      {
-        header: 'Name',
-        cell: (user) => <TextCell text={user.name} />,
-        sort: 'name',
-      },
-    ],
-    []
-  );
-  return (
-    <PageLayout>
-      <PageHeader title="Users" />
-      <PageBody>
-        <PageTable<IUser> 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 Users() {
-  const view = useMyApiView<IUser>({ url: '/api/users' })
-  const tableColumns = ...
-  const toolbarFilters = useMemo<IToolbarFilter[]>(
-    () => [
-      {
-        key: 'name',
-        label: 'Name',
-        type: 'string',
-        query: 'name',
-      },
-    ],
-    []
-  )
-  return (
-    <PageLayout>
-      <PageHeader title="Users" />
-      <PageBody>
-        <PageTable<IUser>
-          tableColumns={tableColumns}
-          toolbarFilters={toolbarFilters}
-          {...view} />
-      </PageBody>
-    </PageLayout>
-  )
-}
-```
-
-## Toolbar Actions
-
-Toolbar actions are specified using ITypedAction.
-
-```tsx
-export function Users() {
-  const view = useMyApiView<IUser>({ url: '/api/users' })
-  const tableColumns = ...
-  const toolbarFilters = ...
-  const toolbarActions = useMemo<ITypedAction<IUser>[]>(
-    () => [
-      {
-        type: TypedActionType.button,
-        variant: ButtonVariant.primary,
-        icon: PlusIcon,
-        label: 'Create user',
-        onClick: () => alert("TODO"),
-      },
-      {
-        type: TypedActionType.bulk,
-        icon: TrashIcon,
-        label: 'Deleted selected users',
-        onClick: (users) => alert("TODO"),
-      },
-    ],
-    []
-  )
-  return (
-    <PageLayout>
-      <PageHeader title="Users" />
-      <PageBody>
-        <PageTable<IUser>
-          tableColumns={tableColumns}
-          toolbarFilters={toolbarFilters}
-          toolbarActions={toolbarActions}
-          {...view} />
-      </PageBody>
-    </PageLayout>
-  )
-}
-```
-
-## Row Actions
-
-Row actions are specified using ITypedAction.
-
-```tsx
-export function Users() {
-  const view = useMyApiView<IUser>({ url: '/api/users' })
-  const tableColumns = ...
-  const toolbarFilters = ...
-  const toolbarActions = ...
-  const rowActions = useMemo<IItemAction<Team>[]>(
-    () => [
-      {
-        icon: EditIcon,
-        label: 'Edit user',
-        onClick: (user) => alert("TODO"),
-      },
-    ],
-    [t]
-  )
-  return (
-    <PageLayout>
-      <PageHeader title="Users" />
-      <PageBody>
-        <PageTable<IUser>
-          tableColumns={tableColumns}
-          toolbarFilters={toolbarFilters}
-          toolbarActions={toolbarActions}
-          rowActions={rowActions}
-          {...view} />
-      </PageBody>
-    </PageLayout>
-  )
-}
-```