diff --git a/.gitignore b/.gitignore index 30a80930..be7af5e6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,133 +1,38 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log* -.pnpm-debug.log* - -# Diagnostic reports (https://nodejs.org/api/report.html) -report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul +# Javascript builds +node_modules +dist +tsc_out +.out +.changelog +.DS_Store coverage -*.lcov - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# Snowpack dependency directory (https://snowpack.dev/) -web_modules/ - -# TypeScript cache -*.tsbuildinfo - -# Optional npm cache directory -.npm - -# Optional eslint cache +.cache +results +.tmp .eslintcache +generated # Cypress cache .cypress-cache -# Optional stylelint cache -.stylelintcache - -# Microbundle cache -.rpt2_cache/ -.rts2_cache_cjs/ -.rts2_cache_es/ -.rts2_cache_umd/ - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variable files -.env -.env.development.local -.env.test.local -.env.production.local -.env.local - -# parcel-bundler cache (https://parceljs.org/) -.cache -.parcel-cache - -# Next.js build output -.next -out - -# Nuxt.js build / generate output -.nuxt -dist - -# Gatsby files -.cache/ -# Comment in the public line in if your project uses Gatsby and not Next.js -# https://nextjs.org/blog/next-9-1#public-directory-support -# public - -# vuepress build output -.vuepress/dist - -# vuepress v2.x temp and cache directory -.temp -.cache - -# Docusaurus cache and generated files -.docusaurus - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -# TernJS port file -.tern-port - -# Stores VSCode versions used for testing VSCode extensions -.vscode-test - -# yarn v2 -.yarn/cache -.yarn/unplugged -.yarn/build-state.yml -.yarn/install-state.gz -.pnp.* +# package managers +lerna-debug.log + +# IDEs and editors +.idea +.project +.classpath +.c9 +*.launch +.settings +*.sublime-workspace +.history +.vscode +.yo-rc.json + +# IDE - VSCode +.vscode +# For vim +*.swp + +public \ No newline at end of file diff --git a/cypress/component/DataView.cy.tsx b/cypress/component/DataView.cy.tsx index b64ce4e7..7199a711 100644 --- a/cypress/component/DataView.cy.tsx +++ b/cypress/component/DataView.cy.tsx @@ -1,9 +1,29 @@ import React from 'react'; +import { Pagination } from '@patternfly/react-core'; +import DataView from '../../packages/module/dist/dynamic/DataView'; +import DataViewToolbar from '../../packages/module/dist/esm/DataViewToolbar'; + +const PAGINATION = { + page: 1, + perPage: 1 +} describe('DataView', () => { - it('renders data view', () => { - cy.mount(
Some text
); + it('renders the data view layout', () => { + cy.mount(<>Data view content) + cy.get('[data-ouia-component-id="DataView-stack-item-0"]').contains('Data view content'); + }); - cy.get('[id="test"]').should('contain', 'Some text'); - }) -}) \ No newline at end of file + it('renders the data view with toolbar, data section and footer', () => { + cy.mount( + + } /> + <>Data section + } ouiaId="DataViewFooter" /> + + ); + cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist'); + cy.get('[data-ouia-component-id="DataView-stack-item-1"]').contains('Data section'); + cy.get('[data-ouia-component-id="DataViewFooter-pagination"]').should('exist'); + }); +}); \ No newline at end of file diff --git a/cypress/component/DataViewToolbar.cy.tsx b/cypress/component/DataViewToolbar.cy.tsx new file mode 100644 index 00000000..e994c071 --- /dev/null +++ b/cypress/component/DataViewToolbar.cy.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Pagination } from '@patternfly/react-core'; +import DataViewToolbar from '../../packages/module/dist/dynamic/DataViewToolbar'; + +describe('DataViewToolbar', () => { + it('renders the data view toolbar', () => { + cy.mount(} />) + cy.get('[data-ouia-component-id="DataViewToolbar"]').should('exist'); + cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist'); + }); +}); \ No newline at end of file diff --git a/cypress/e2e/DataView.spec.cy.ts b/cypress/e2e/DataView.spec.cy.ts index a336976a..b3d42025 100644 --- a/cypress/e2e/DataView.spec.cy.ts +++ b/cypress/e2e/DataView.spec.cy.ts @@ -1,6 +1,6 @@ describe('Test the Data view docs page', () => { - it('renders the docs', () => { + it.skip('renders the docs', () => { cy.visit('http://localhost:8006/extensions/data-view/data-view'); }) }) \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 08eb58e7..91e65bac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4271,6 +4271,8 @@ "version": "6.0.0-alpha.50", "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-alpha.50.tgz", "integrity": "sha512-RIO5g0s/i5lAjkjp0eaOdqhefKzppWeAl7M/+dGkHjsoNUG0xbKigzpy3kHYHphbAA1O9vCKYfoEPlcTB0Svvg==", + "dev": true, + "peer": true, "dependencies": { "@patternfly/react-icons": "^6.0.0-alpha.19", "@patternfly/react-styles": "^6.0.0-alpha.19", @@ -17407,8 +17409,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.debounce": { "version": "4.0.8", @@ -26168,8 +26169,9 @@ "version": "1.0.0-prerelease.0", "license": "MIT", "dependencies": { - "@patternfly/react-core": "^6.0.0-alpha.50", + "@patternfly/react-core": "^6.0.0-alpha.55", "@patternfly/react-icons": "^6.0.0-alpha.20", + "@patternfly/react-table": "^6.0.0-alpha.55", "clsx": "^2.1.1", "react-jss": "^10.10.0" }, @@ -26191,6 +26193,40 @@ "react": "^17 || ^18", "react-dom": "^17 || ^18" } + }, + "packages/module/node_modules/@patternfly/react-core": { + "version": "6.0.0-alpha.55", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-alpha.55.tgz", + "integrity": "sha512-PKhAKRb4na5QPE8vbgwX5qI+e9jDn+yrQIyiT04/+SfhT2fag2NnaBdhQ0g07zDo1fDoLS1yhMalegN+Qh8uNw==", + "dependencies": { + "@patternfly/react-icons": "^6.0.0-alpha.20", + "@patternfly/react-styles": "^6.0.0-alpha.20", + "@patternfly/react-tokens": "^6.0.0-alpha.20", + "focus-trap": "7.5.2", + "react-dropzone": "^14.2.3", + "tslib": "^2.5.0" + }, + "peerDependencies": { + "react": "^17 || ^18", + "react-dom": "^17 || ^18" + } + }, + "packages/module/node_modules/@patternfly/react-table": { + "version": "6.0.0-alpha.55", + "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.0.0-alpha.55.tgz", + "integrity": "sha512-/rL3UP76SnKlSNR6lNcC7hfdzA2jOR0svyHKrIAUAdSV/FAPA2Ac3wEYDDwfTmrjUDtQMJgeWEHSQXjMqeIJtw==", + "dependencies": { + "@patternfly/react-core": "^6.0.0-alpha.55", + "@patternfly/react-icons": "^6.0.0-alpha.20", + "@patternfly/react-styles": "^6.0.0-alpha.20", + "@patternfly/react-tokens": "^6.0.0-alpha.20", + "lodash": "^4.17.19", + "tslib": "^2.5.0" + }, + "peerDependencies": { + "react": "^17 || ^18", + "react-dom": "^17 || ^18" + } } } } diff --git a/packages/module/generate-index.js b/packages/module/generate-index.js index f2d29ef6..ba21e423 100644 --- a/packages/module/generate-index.js +++ b/packages/module/generate-index.js @@ -20,7 +20,8 @@ async function generateIndex(files) { files.forEach(file => { const name = file.replace('/index.ts', '').split('/').pop(); - stream.write(`\nexport { default as ${name} } from './${name}';\n`); + // do not generate default exports for Hooks/ + name !== 'Hooks' && stream.write(`\nexport { default as ${name} } from './${name}';\n`); stream.write(`export * from './${name}';\n`); }); stream.end(); diff --git a/packages/module/package.json b/packages/module/package.json index 991d6b5d..22b9afd7 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -31,8 +31,9 @@ "tag": "prerelease" }, "dependencies": { - "@patternfly/react-core": "^6.0.0-alpha.50", + "@patternfly/react-core": "^6.0.0-alpha.55", "@patternfly/react-icons": "^6.0.0-alpha.20", + "@patternfly/react-table": "^6.0.0-alpha.55", "react-jss": "^10.10.0", "clsx": "^2.1.1" }, diff --git a/packages/module/patternfly-a11y.config.js b/packages/module/patternfly-a11y.config.js index 9688ce62..1af47785 100644 --- a/packages/module/patternfly-a11y.config.js +++ b/packages/module/patternfly-a11y.config.js @@ -22,7 +22,8 @@ module.exports = { 'color-contrast', 'landmark-no-duplicate-main', 'landmark-main-is-top-level', - 'scrollable-region-focusable' + 'scrollable-region-focusable', + 'link-in-text-block', ].join(','), ignoreIncomplete: true }; diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md index dafb2a7e..51a960ba 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md @@ -5,7 +5,7 @@ section: extensions subsection: Data view # Sidenav secondary level section # should be the same for all markdown files -id: Data view +id: Data view layout # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) source: react # If you use typescript, the name of the interface to display props for @@ -13,15 +13,24 @@ source: react propComponents: ['DataView'] sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md --- - +import { Pagination } from '@patternfly/react-core'; import DataView from '@patternfly/react-data-view/dist/dynamic/DataView'; +import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; The **data view** component renders record data in a configured layout. -### Basic example +### Layout example + +Data view is expected to consist of header, data part and footer stacked below each other and passed as `children`. + +```js file="./DataViewLayoutExample.tsx" + +``` + +### Predefined layout components -A blank example of the data view layout. +You can make use of the predefined layout components to display a default header and footer. See [data view toolbar](/data-view/data-view-toolbar) for more information -```js file="./DataViewExample.tsx" +```js file="./DataViewPredefinedLayoutExample.tsx" ``` diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewExample.tsx deleted file mode 100644 index a9ab4566..00000000 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewExample.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import DataView from '@patternfly/react-data-view/dist/dynamic/DataView'; - -export const BasicExample: React.FunctionComponent = () => ( - -); diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewLayoutExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewLayoutExample.tsx new file mode 100644 index 00000000..eb0a3f86 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewLayoutExample.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import DataView from '@patternfly/react-data-view/dist/dynamic/DataView'; + +const layoutItemStyling = { + width: '100%', + height: '5rem', + padding: 'var(--pf-t--global--spacer--md)', + border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)' +}; + +export const BasicExample: React.FunctionComponent = () => ( + +
Header
+
Data representation
+
Footer
+ +) diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewPredefinedLayoutExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewPredefinedLayoutExample.tsx new file mode 100644 index 00000000..6a6badd3 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewPredefinedLayoutExample.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Pagination } from '@patternfly/react-core'; +import DataView from '@patternfly/react-data-view/dist/dynamic/DataView'; +import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; + +const layoutItemStyling = { + width: '100%', + height: '5rem', + padding: 'var(--pf-t--global--spacer--md)', + border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)' +}; + +const PAGINATION = { + page: 1, + perPage: 1 +} + +export const BasicExample: React.FunctionComponent = () => ( + + } /> +
Data representation
+ } /> + +) diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbar.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbar.md new file mode 100644 index 00000000..37db4d1e --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbar.md @@ -0,0 +1,27 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Data view +# Sidenav secondary level section +# should be the same for all markdown files +id: Data view toolbar +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: ['DataViewToolbar'] +sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbar.md +--- +import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; + +The **data view toolbar** component renders a default opinionated data view toolbar. + +### Basic example + +Data view toolbar can display a pagination using the `pagination` property accepting a React node. You can also pass a custom `ouiaId` for testing purposes. + +```js file="./DataViewToolbarExample.tsx" + +``` + diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbarExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbarExample.tsx new file mode 100644 index 00000000..0089457f --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbarExample.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { Pagination } from '@patternfly/react-core'; +import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; + +export const BasicExample: React.FunctionComponent = () => ( + } /> +) diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Hooks/Hooks.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/Hooks/Hooks.md new file mode 100644 index 00000000..b81e0017 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Hooks/Hooks.md @@ -0,0 +1,23 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Data view +# Sidenav secondary level section +# should be the same for all markdown files +id: Hooks +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: [] +sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Hooks/Hooks.md +--- +Data view hooks provide a predefined solution to manage state of the data view. This modular approach allows them to be easily replaced with a custom implementation in case of more specific needs. + +### useDataViewPagination() + +The `useDataViewPagination` hook manages the pagination state of the data view. It retrieves the current `page` and `perPage` values together with functions to set them (`setPage`, `setPerPage`) + +Coming soon... + diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js index e919e99b..6cea751f 100644 --- a/packages/module/patternfly-docs/generated/index.js +++ b/packages/module/patternfly-docs/generated/index.js @@ -10,15 +10,36 @@ module.exports = { sortValue: 1, Component: () => import(/* webpackChunkName: "extensions/data-view/about-data-view/extensions/index" */ './extensions/data-view/about-data-view/extensions') }, - '/extensions/data-view/data-view/react': { - id: "Data view", - title: "Data view", + '/extensions/data-view/hooks/react': { + id: "Hooks", + title: "Hooks", + toc: [[{"text":"useDataViewPagination()"}]], + section: "extensions", + subsection: "Data view", + source: "react", + tabName: null, + Component: () => import(/* webpackChunkName: "extensions/data-view/hooks/react/index" */ './extensions/data-view/hooks/react') + }, + '/extensions/data-view/data-view-toolbar/react': { + id: "Data view toolbar", + title: "Data view toolbar", toc: [[{"text":"Basic example"}]], examples: ["Basic example"], section: "extensions", subsection: "Data view", source: "react", tabName: null, - Component: () => import(/* webpackChunkName: "extensions/data-view/data-view/react/index" */ './extensions/data-view/data-view/react') + Component: () => import(/* webpackChunkName: "extensions/data-view/data-view-toolbar/react/index" */ './extensions/data-view/data-view-toolbar/react') + }, + '/extensions/data-view/data-view-layout/react': { + id: "Data view layout", + title: "Data view layout", + toc: [[{"text":"Layout example"},{"text":"Predefined layout components"}]], + examples: ["Layout example","Predefined layout components"], + section: "extensions", + subsection: "Data view", + source: "react", + tabName: null, + Component: () => import(/* webpackChunkName: "extensions/data-view/data-view-layout/react/index" */ './extensions/data-view/data-view-layout/react') } }; \ No newline at end of file diff --git a/packages/module/src/DataView/DataView.test.tsx b/packages/module/src/DataView/DataView.test.tsx index c5714b80..afa5f8be 100644 --- a/packages/module/src/DataView/DataView.test.tsx +++ b/packages/module/src/DataView/DataView.test.tsx @@ -6,8 +6,8 @@ import DataView from './DataView'; describe('DataView', () => { it('should render data view', () => { - render(); - expect(screen.getByText('This is Data view')).toBeInTheDocument(); + render(<>Data view content); + expect(screen.getByText('Data view content')).toBeInTheDocument(); }); }); diff --git a/packages/module/src/DataView/DataView.tsx b/packages/module/src/DataView/DataView.tsx index 32b1192d..092fa17f 100644 --- a/packages/module/src/DataView/DataView.tsx +++ b/packages/module/src/DataView/DataView.tsx @@ -1,15 +1,22 @@ import React from 'react'; -import { Text } from '@patternfly/react-core'; - +import { Stack, StackItem } from '@patternfly/react-core'; export interface DataViewProps { - /** Example prop */ - text?: string; + /** Content rendered inside the data view */ + children: React.ReactNode; + /** Custom OUIA ID */ + ouiaId?: string; } -export const DataView: React.FunctionComponent = ({ - text = 'This is Data view' +export const DataView: React.FC = ({ + children, ouiaId = 'DataView', ...props }: DataViewProps) => ( - {text} -); + + {React.Children.map(children, (child, index) => ( + + {child} + + ))} + +) export default DataView; diff --git a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx new file mode 100644 index 00000000..ec03d5e4 --- /dev/null +++ b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core'; + +export interface DataViewToolbarProps { + /** Toolbar className */ + className?: string; + /** Custom OUIA ID */ + ouiaId?: string; + /** React component to display pagination */ + pagination?: React.ReactNode; +} + +export const DataViewToolbar: React.FC> = ({ className, ouiaId = 'DataViewToolbar', pagination, children, ...props }: React.PropsWithChildren) => ( + + + {pagination && ( + + { /* TO DO: Make the pagination work later */ } + {pagination} + + )} + {children} + + +); + +export default DataViewToolbar; diff --git a/packages/module/src/DataViewToolbar/index.ts b/packages/module/src/DataViewToolbar/index.ts new file mode 100644 index 00000000..0cd341c9 --- /dev/null +++ b/packages/module/src/DataViewToolbar/index.ts @@ -0,0 +1,2 @@ +export { default } from './DataViewToolbar'; +export * from './DataViewToolbar'; diff --git a/packages/module/src/Hooks/index.ts b/packages/module/src/Hooks/index.ts new file mode 100644 index 00000000..6929c3b3 --- /dev/null +++ b/packages/module/src/Hooks/index.ts @@ -0,0 +1 @@ +export * from './useDataViewPagination'; diff --git a/packages/module/src/Hooks/useDataViewPagination.ts b/packages/module/src/Hooks/useDataViewPagination.ts new file mode 100644 index 00000000..fe1c3c56 --- /dev/null +++ b/packages/module/src/Hooks/useDataViewPagination.ts @@ -0,0 +1,4 @@ +export interface DataViewPaginationProps { + page: number; + perPage: number; +} \ No newline at end of file diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index 2e4b6f87..f87a6d04 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -1,4 +1,8 @@ // this file is autogenerated by generate-index.js, modifying it manually will have no effect +export * from './Hooks'; + +export { default as DataViewToolbar } from './DataViewToolbar'; +export * from './DataViewToolbar'; export { default as DataView } from './DataView'; export * from './DataView';