export section filter as its own module, because it has dependencies …

…on section, dialog, reach dialog and react-tools

.eslintignore

@@ -35,6 +35,8 @@ pagination.js
 pagination.d.ts
 section.js
 section.d.ts
+sectionFilter.js
+sectionFilter.d.ts
 selectDialog.js
 selectDialog.d.ts
 submitButton.js

.gitignore

@@ -66,6 +66,8 @@ pagination.js
 pagination.d.ts
 section.js
 section.d.ts
+sectionFilter.js
+sectionFilter.d.ts
 selectDialog.js
 selectDialog.d.ts
 submitButton.js

package.json

@@ -119,6 +119,8 @@
     "pagination.d.ts",
     "section.js",
     "section.d.ts",
+    "sectionFilter.js",
+    "sectionFilter.d.ts",
     "selectDialog.js",
     "selectDialog.d.ts",
     "submitButton.js",

src/components/section/SectionFilter/FilterDialog.tsx → src/components/sectionFilter/FilterDialog.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { Dialog, DialogProps } from '@reach/dialog'
-import { useInternationalization, useTheme } from '../../../framework'
-import { DialogHeader, DialogHeaderProps } from '../../dialog'
+import { useInternationalization, useTheme } from '../../framework'
+import { DialogHeader, DialogHeaderProps } from '../dialog'
 
 type Props = Partial<Pick<DialogHeaderProps, 'title'>> &
   Pick<DialogHeaderProps, 'onDismiss'> &

src/components/section/SectionFilter/SectionFilter.tsx → src/components/sectionFilter/SectionFilter.tsx

@@ -2,9 +2,9 @@ import classNames from 'classnames'
 import { Form, Formik, useFormikContext } from 'formik'
 import { ReactChildren, ReactElement, ReactNode, useEffect } from 'react'
 import { useMatchMediaQuery } from '@aboutbits/react-toolbox'
-import { useTheme } from '../../../framework'
-import { ClassNameProps } from '../../types'
-import { SubmitButton } from '../../button/SubmitButton'
+import { useTheme } from '../../framework'
+import { ClassNameProps } from '../types'
+import { SubmitButton } from '../button/SubmitButton'
 import { FilterDialog } from './FilterDialog'
 
 type Props<T> = ClassNameProps & {

src/components/section/SectionFilter/SectionFilterAction.tsx → src/components/sectionFilter/SectionFilterAction.tsx

@@ -1,10 +1,7 @@
 import IconFilterList from '@aboutbits/react-material-icons/dist/IconFilterList'
 import { ReactElement } from 'react'
-import {
-  SectionAction,
-  SectionActionProps,
-} from '../SectionHeader/SectionAction'
-import { useInternationalization, useTheme } from '../../../framework'
+import { SectionAction, SectionActionProps } from '../section'
+import { useInternationalization, useTheme } from '../../framework'
 
 type Props = Pick<SectionActionProps, 'onClick'> &
   Partial<Pick<SectionActionProps, 'label' | 'Icon'>> & {

src/examples/list.stories.mdx

@@ -11,10 +11,7 @@ import {
   SectionFooter,
 } from '../components/section'
 import { PaginationInMemory } from '../components/pagination'
-import {
-  SectionFilter,
-  SectionFilterAction,
-} from '../components/section/SectionFilter'
+import { SectionFilter, SectionFilterAction } from '../components/sectionFilter'
 import { Select } from '../components/form'
 
 <Meta title="Examples/List" />

src/sectionFilter.ts

@@ -0,0 +1 @@
+export * from './components/sectionFilter'