npm - @patternfly/react-data-view - Versions diffs - 7.0.0-prerelease.1 → 7.0.0-prerelease.3 - Mend

@patternfly/react-data-view 7.0.0-prerelease.1 → 7.0.0-prerelease.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (156) hide show

package/src/DataView/__snapshots__/DataView.test.tsx.snap CHANGED Viewed

@@ -6,35 +6,35 @@ exports[`DataView component should render correctly 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="pf-v5-l-stack"
-        data-ouia-component-id="DataView-stack}"
+        class="pf-v6-l-stack"
+        data-ouia-component-id="DataView-stack"
       >
         <div
-          class="pf-v5-l-stack__item"
+          class="pf-v6-l-stack__item"
           data-ouia-component-id="DataView-stack-item-0"
         >
           <div
-            style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
+            style="width: 100%; height: 5rem;"
           >
             Header
           </div>
         </div>
         <div
-          class="pf-v5-l-stack__item"
+          class="pf-v6-l-stack__item"
           data-ouia-component-id="DataView-stack-item-1"
         >
           <div
-            style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px; border-top-width: 0; border-bottom-width: 0;"
+            style="width: 100%; height: 5rem;"
           >
             Data representation
           </div>
         </div>
         <div
-          class="pf-v5-l-stack__item"
+          class="pf-v6-l-stack__item"
           data-ouia-component-id="DataView-stack-item-2"
         >
           <div
-            style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
+            style="width: 100%; height: 5rem;"
           >
             Footer
           </div>
@@ -44,35 +44,35 @@ exports[`DataView component should render correctly 1`] = `
   </body>,
   "container": <div>
     <div
-      class="pf-v5-l-stack"
-      data-ouia-component-id="DataView-stack}"
+      class="pf-v6-l-stack"
+      data-ouia-component-id="DataView-stack"
     >
       <div
-        class="pf-v5-l-stack__item"
+        class="pf-v6-l-stack__item"
         data-ouia-component-id="DataView-stack-item-0"
       >
         <div
-          style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
+          style="width: 100%; height: 5rem;"
         >
           Header
         </div>
       </div>
       <div
-        class="pf-v5-l-stack__item"
+        class="pf-v6-l-stack__item"
         data-ouia-component-id="DataView-stack-item-1"
       >
         <div
-          style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px; border-top-width: 0; border-bottom-width: 0;"
+          style="width: 100%; height: 5rem;"
         >
           Data representation
         </div>
       </div>
       <div
-        class="pf-v5-l-stack__item"
+        class="pf-v6-l-stack__item"
         data-ouia-component-id="DataView-stack-item-2"
       >
         <div
-          style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
+          style="width: 100%; height: 5rem;"
         >
           Footer
         </div>

package/src/DataViewEventsContext/DataViewEventsContext.test.tsx ADDED Viewed

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useDataViewEventsContext, DataViewEventsProvider, EventTypes } from './DataViewEventsContext';
+let id = 0;
+beforeAll(() => {
+  Object.defineProperty(global, 'crypto', {
+    value: {
+      randomUUID: jest.fn(() => `mocked-uuid-${id++}`),
+    },
+  });
+});
+describe('DataViewEventsContext', () => {
+  test('should provide context value and allow subscriptions', () => {
+    const callback = jest.fn();
+    const TestComponent = () => {
+      const { subscribe, trigger } = useDataViewEventsContext();
+      React.useEffect(() => {
+        const unsubscribe = subscribe(EventTypes.rowClick, callback);
+        return () => unsubscribe();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+    const { getByText } = render(
+      <DataViewEventsProvider>
+        <TestComponent />
+      </DataViewEventsProvider>
+    );
+    fireEvent.click(getByText('Trigger'));
+    expect(callback).toHaveBeenCalledWith('some payload');
+  });
+  test('should handle unsubscribing correctly', () => {
+    const callback = jest.fn();
+    const TestComponent = () => {
+      const { subscribe, trigger } = useDataViewEventsContext();
+      React.useEffect(() => {
+        const unsubscribe = subscribe(EventTypes.rowClick, callback);
+        unsubscribe();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+    const { getByText } = render(
+      <DataViewEventsProvider>
+        <TestComponent />
+      </DataViewEventsProvider>
+    );
+    fireEvent.click(getByText('Trigger'));
+    expect(callback).not.toHaveBeenCalled();
+  });
+  test('should handle multiple subscriptions and trigger events correctly', () => {
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+    const TestComponent = () => {
+      const { subscribe, trigger } = useDataViewEventsContext();
+      React.useEffect(() => {
+        const unsubscribe1 = subscribe(EventTypes.rowClick, callback1);
+        const unsubscribe2 = subscribe(EventTypes.rowClick, callback2);
+        return () => {
+          unsubscribe1();
+          unsubscribe2();
+        };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+    const { getByText } = render(
+      <DataViewEventsProvider>
+        <TestComponent />
+      </DataViewEventsProvider>
+    );
+    fireEvent.click(getByText('Trigger'));
+    expect(callback1).toHaveBeenCalledWith('some payload');
+    expect(callback2).toHaveBeenCalledWith('some payload');
+  });
+});

package/src/DataViewEventsContext/DataViewEventsContext.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+import React, {
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useState
+} from "react";
+export const EventTypes = {
+  rowClick: 'rowClick'
+} as const;
+export type DataViewEvent = typeof EventTypes[keyof typeof EventTypes];
+type Callback = (...args: any[]) => void;    // eslint-disable-line @typescript-eslint/no-explicit-any
+interface Subscriptions { [id: string]: Callback }
+type EventSubscriptions = { [event in DataViewEvent]: Subscriptions };
+type Subscribe = (event: DataViewEvent, callback: Callback) => () => void;
+type Trigger = (event: DataViewEvent, ...payload: any[]) => void;    // eslint-disable-line @typescript-eslint/no-explicit-any
+export interface DataViewEventsContextValue {
+  subscribe: Subscribe;
+  trigger: Trigger;
+}
+export const DataViewEventsContext = createContext<DataViewEventsContextValue>({
+  subscribe: () => () => null,
+  trigger: () => null
+});
+export const DataViewEventsProvider = ({ children }: PropsWithChildren) => {
+  const [ subscriptions, setSubscriptions ] = useState<EventSubscriptions>({
+    [EventTypes.rowClick]: {}
+  });
+  const subscribe: Subscribe = (event, callback) => {
+    const id = crypto.randomUUID();
+    // set new subscription
+    setSubscriptions(prevSubscriptions => ({
+      ...prevSubscriptions,
+      [event]: { ...prevSubscriptions[event], [id]: callback }
+    }));
+    // return unsubscribe function
+    return () => {
+      setSubscriptions(prevSubscriptions => {
+        const updatedSubscriptions = { ...prevSubscriptions };
+        delete updatedSubscriptions[event][id];
+        return updatedSubscriptions;
+      });
+    };
+  };
+  const trigger = useCallback((event: DataViewEvent, ...payload: unknown[]) => {
+    Object.values(subscriptions[event]).forEach(callback => {
+      callback(...payload);
+    });
+  }, [ subscriptions ]);
+  return (
+    <DataViewEventsContext.Provider value={{ subscribe, trigger }}>
+      {children}
+    </DataViewEventsContext.Provider>
+  );
+};
+export const useDataViewEventsContext = () => useContext(DataViewEventsContext);
+export default DataViewEventsContext;

package/src/DataViewEventsContext/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './DataViewEventsContext';
2	+ export * from './DataViewEventsContext';

package/src/DataViewTable/DataViewTable.test.tsx ADDED Viewed

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataViewTable, DataViewTrTree } from './DataViewTable';
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  children?: Repository[];
+}
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+const rows = repositories.map(repo => ({ row: Object.values(repo) }));
+const repositoriesTree: Repository[] = [
+  {
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one',
+    children: [
+      { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+      { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+    ]
+  },
+  {
+    name: 'Repository four',
+    branches: 'Branch four',
+    prs: 'Pull request four',
+    workspaces: 'Workspace four',
+    lastCommit: 'Timestamp four',
+    children: [ { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' } ]
+  },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
+  row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
+  id: repo.name, // unique ID for each row
+  ...(repo.children
+    ? {
+      children: buildRows(repo.children) // build rows for children
+    }
+    : {})
+}));
+const treeRows = buildRows(repositoriesTree);
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+const ouiaId = 'TableExample';
+describe('DataViewTable component', () => {
+  test('should render a basic table correctly', () => {
+    const { container } = render(
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+  test('should render a tree table correctly', () => {
+    const { container } = render(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={treeRows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewTable/DataViewTable.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+import {
+  TdProps,
+  ThProps,
+  TrProps
+} from '@patternfly/react-table';
+import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
+import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
+// Table head typings
+export type DataViewTh = ReactNode | { cell: ReactNode; props?: ThProps };
+export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
+// Basic table typings
+export interface DataViewTrObject { row: DataViewTd[], id?: string, props?: TrProps }
+export type DataViewTd = ReactNode | { cell: ReactNode; props?: TdProps };
+export type DataViewTr = DataViewTd[] | DataViewTrObject;
+export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } => value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[], id?: string } => value != null && typeof value === 'object' && 'row' in value;
+// Tree table typings
+export interface DataViewTrTree extends DataViewTrObject { id: string, children?: DataViewTrTree[] }
+export type DataViewTableProps =
+  | ({
+      isTreeTable: true;
+    } & DataViewTableTreeProps)
+  | ({
+      isTreeTable?: false;
+    } & DataViewTableBasicProps);
+export const DataViewTable: React.FC<DataViewTableProps> = (props) => (
+  props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
+);
+export default DataViewTable;